Sharon
Sharon

Reputation: 3919

How can I make an item both sortable (jQuery UI) and draggable (HTML5)?

I have a sortable list, using the jQuery UI sortable. However, I also want items in the list to be draggable using HTML 5 (ie not jQuery UI Draggable). The problem is, the sortable seems to override the draggable. So, I have:

<ul id="my-folder-list" class="ui-sortable">
    <li draggable="true" item-id="6KXoILDr5K" ondragstart="drag(event);"><div>Winter 2012</div></li>
    <li draggable="true" item-id="WL2mL8emnH" ondragstart="drag(event);"><div>Summer 2012</div></li>
</ul>

And basically I want the folders to be sortable among themselves, but if one of them is dragged off to another div (a trashcan) then it should be deleted.

Upvotes: 1

Views: 703

Answers (1)

ola
ola

Reputation: 478

Have a look at HTML5 Sortable which is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

You'll find it here: http://farhadi.ir/projects/html5sortable/

Upvotes: 1

Related Questions