Sortable 不能与 Draggable 和 droppable 一起正常工作

【问题标题】：Sortable doesn't work properly with draggable and droppableSortable 不能与 Draggable 和 droppable 一起正常工作
【发布时间】：2011-09-27 15:33:57
【问题描述】：

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

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

目前 sortable 功能在没有 Draggable & Droppable 的情况下工作，在http://jsfiddle.net/nivea75ml/sNnAe/查看它。但是它不适用于 Draggable 和 Droppable，请参阅 http://jsfiddle.net/nivea75ml/5NhFA/1/。

谁能帮帮我？提前致谢！

【问题讨论】：

标签： jquery

【解决方案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。

【讨论】：