jQuery-UI 可拖动和可排序答案

【问题标题】：jQuery-UI Draggable and SortablejQuery-UI 可拖动和可排序
【发布时间】：2011-12-11 07:48:52
【问题描述】：

所以我一直在使用这个示例：http://jqueryui.com/demos/draggable/#sortable，并且我已经在我的产品上完成了它。不过，我想做两个重要的改变。

我不希望第二个列表（在我的示例中为 toList）可以自行排序。我只希望它接受第一个列表中的项目（在我的示例中为 fromList）。
当用户将一个项目从第一个列表 (fromList) 拖放到第二个列表 (toList) 中时，我希望将该项目强制到底部。

建议？这是迄今为止我所拥有的工作小提琴。 http://jsfiddle.net/CrtFD/

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-sortable

【解决方案1】：

尝试将droppable 用于您的 toList：

编辑：以下每cmets：

http://jsfiddle.net/abzYK/

jQuery(document).ready(function(){
    jQuery("#fromList li").draggable('destroy').draggable({
        connectToSortable: "#toList",
        revert: "invalid",
        containment: '#equipCont',
        helper: function(e, ui) {
            return jQuery(this).clone().css('width', jQuery(this).width());
        }
    });
    jQuery("#toList").droppable('destroy').droppable({
        drop: function(e, ui) {
            var dragClone = jQuery(ui.draggable).clone();
            jQuery("#toList").append(dragClone);
        }
    });
    jQuery("ul, li").disableSelection();
});

【讨论】：

嗯，可能是在正确的道路上，但你的例子有两个问题。 1 它不再克隆项目 fromList 实际上是移动它。 2 一旦我将一个项目移动到 toList 中，它仍然是可拖动的。
这就是我完成它的方法，尽管使用了你的代码，所以为你 +1。 jsfiddle.net/abzYK

【解决方案2】：

你希望你的 toList 是 Droppable，而不是 Sortable。这个例子似乎描述了你想要完成的事情：http://jqueryui.com/demos/droppable/#shopping-cart

【讨论】：

与上述相同的问题。尽管它确实正确处理了克隆，但第二个列表中的项目仍然是可拖动的。