jQuery-UI 可拖动和可排序

Posted 2023-05-08

【中文标题】jQuery-UI 可拖动和可排序

【英文标题】：jQuery-UI Draggable and Sortable

【发布时间】：2011-12-11 07:48:52

【问题描述】：

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

我不希望第二个列表（在我的示例中为 toList）可以自行排序。我只希望它接受第一个列表中的项目（在我的示例中为 fromList）。

当用户将一个项目从第一个列表 (fromList) 拖放到第二个列表 (toList) 中时，我希望将该项目强制到底部。

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

【参考方案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

【讨论】：

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