jquery - 可排序无法与可拖动和可放置一起正常工作

Question

查看演示 http://jsfiddle.net/nivea75ml/5NhFA/1/ .

这里，底部的绿色 block 可以拖放到黑暗的加里区域。另外，我希望这 3 个 block 是可排序的，例如，如果首先将 Block2 拖到深灰色区域，然后 Block3 应该移动到 Block2 的位置。

目前排序功能无需 Draggable & Droppable 即可使用，查看 http://jsfiddle.net/nivea75ml/sNnAe/ 。但是它不适用于 Draggable & Droppable，请参阅 http://jsfiddle.net/nivea75ml/5NhFA/1/ .

谁能帮帮我吗？提前致谢!

Answer 1

听起来您只想将 Sortable 与连接的列表一起使用:http://jqueryui.com/demos/sortable/#connect-lists

我修改了你的第一个jsfiddle:

HTML:

<div class="demo">

    <div id="droppable" class="drp">

    </div>
    <div id="draggableElements" class="drp">
        <div class="draggable">
            <p>Sen1</p>
        </div>
        <div class="draggable">
            <p>Sen2</p>
        </div>
        <div class="draggable">
            <p>Sen3</p>
        </div>

    </div>
</div>

Javascript:

$(function() {

            $("#draggableElements, #droppable").sortable({
                    connectWith: ".drp",
                    placeholder: "ui-draggable"
                });

    });

这使得上面的灰色区域也可以排序，这可能完全满足您的需求，也可能不完全满足您的需求。如果您想将可排序的项目放入可放置的项目中，并能够将其重新放入可排序的项目中，请看一下:jQuery Sortable and Droppable .