jQuery UI Sortable + Draggable + Droppable在相同的元素上

时间:2011-06-08 22:10:14

标签: jquery-ui jquery-ui-sortable jquery-ui-draggable

我正在寻找使用相同项目的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>

当我使用sortable + draggable + droppable时,只有一个或另一个不能同时使用它们。为实现这一点,我缺少什么?

谢谢!

1 个答案:

答案 0 :(得分:0)

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

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

如果你想把一个项目元素放到另一个元素中,请告诉我,我会看看能不能正常工作并发布一个更新的小提琴。