jQuery-UI可拖动和可排序

时间:2011-10-19 21:38:04

标签: jquery jquery-ui draggable jquery-ui-sortable

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

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

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

  3. 连连呢?这是我到目前为止所做的一个工作小提琴。 http://jsfiddle.net/CrtFD/

2 个答案:

答案 0 :(得分:2)

尝试使用droppable作为你的toList:

编辑:以下评论:

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 :(得分:0)

您希望您的toList是Droppable,而不是Sortable。此示例似乎描述了您要完成的任务:http://jqueryui.com/demos/droppable/#shopping-cart