jQuery-UI 可拖动和可排序

Question

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

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

2. 当用户从第一个列表（fromList）拖动一个项目并将其放入第二个列表（toList）时，我希望该项目被强制到底部。

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

Answer 1

尝试为您的 toList 使用 droppable：

编辑： 根据以下评论：

< a href="http://jsfiddle.net/abzYK/" rel="nofollow">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();
});
​

Answer 2

您希望您的 toList 是可删除的，而不是可排序的。此示例似乎描述了您想要完成的任务： http://jqueryui.com/demos/可丢弃/#shopping-cart