HTML5 UL LI Draggable

html drag-and-drop html-lists draggable
Anand Chowdhary picture Anand Chowdhary · Sep 8, 2012 · Viewed 54.9k times · Source

I have an unordered list:

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5

Implemented with this code:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

Now, I want it to be draggable. For example, if I drag "List item 5" upward, I can place it between "List item 2" and "List item 3", and it'll become third.

I want to do this without jQuery, just plain Javascript. Also, I'd like to use native HTML5 draggable="true". Any help would be appreciated.

Answer

18bytes picture 18bytes · Sep 8, 2012

Attribute "draggable" only enables the element for dragging. You need to implement the DnD listener and implement the drop event to make the changes you want.

You will find the same problem you want to solve in this example: http://www.html5rocks.com/en/tutorials/dnd/basics/

In the example they implement drag-drop for columns A, B and C. User can change the order by DnD.

Related questions

drag drop files into standard html file input

These days we can drag & drop files into a special container and upload them with XHR 2. Many at a time. With live progress bars etc. Very cool stuff. Example here. But sometimes we don't want that much coolness. What …

Read More
How do I remove a file from the FileList

I'm building a drag-and-drop-to-upload web application using HTML5, and I'm dropping the files onto a div and of course fetching the dataTransfer object, which gives me the FileList. Now I want to remove some of the files, but I don't …

Read More
Is there a good jQuery Drag-and-drop file upload plugin?

Is there a nice tidy jQuery plugin that allows including a single JS script then using a simple snippet to enable a form? Something like this: $j('#MyForm').enableDragDropUploads('.upload-area') With the upload target being the action of …

Read More