jQuery UI Sortable + Draggable + Droppable on same elements

Question

I'm looking to use jQuery UI Sortable + Draggable + Droppable with the same items. I'd like to sort all .item elements and be able to drag and drop an .item into another. Below is my code:

<script>
    $(function() {
        $("#wrapper").sortable({
            items: ".item",
            stop: function(event, ui) {
                // save new sort order
            }
        });

        $(".item").draggable({
            helper: ".clone",
            connectToSortable: "#wrapper"
        }).disableSelection().droppable({
            accept: ".slide",
            drop: function(event, ui) {
                // dropping .item into another .item
            }
        });
    });
</script>

<div id="wrapper">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
</div>

When I use sortable + draggable + droppable, only one or the other works not all of them together. What am I missing to achieve this?

Thanks!

cmhampton cmhampton · Accepted Answer · 2011-06-10T16:17:11

I'm not sure I entire understand what you are trying to say. If you are just trying to sort the items in your list with drag and drop, you don't need the .draggable and .droppable.

http://jsfiddle.net/Earendil/saQwr/

If you are trying to drop one item element into another, let me know and I'll see if I can get that working and post an updated fiddle for it.

jQuery UI Sortable + Draggable + Droppable on same elements

1 Answers