jQuery UI 可排序 +可拖动+可放置在相同的元素上

Question

我希望将 jQuery UI Sortable + Draggable + Droppable 与相同的项目一起使用。我想对所有 .item 元素进行排序，并能够将 .item 拖放到另一个中。下面是我的代码：

<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>

当我使用可排序+可拖动+可放置时，只有其中之一可以工作，而不是全部一起工作。为了实现这个目标我缺少什么？

谢谢！

Answer 1

我不确定我完全理解你想说什么。如果您只是尝试通过拖放对列表中的项目进行排序，则不需要 .draggable 和 .droppable。

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

如果您尝试将一项元素放入另外，请告诉我，我会看看是否可以正常工作并为其发布更新的小提琴。