JQuery 拖放可排序连接列表

Question

从JQueryUI demos的例子开始，我试图禁用左边列表的排序，左边的项目必须被复制而不是移动， 有可能吗？

I've created a jsfiddle for it

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
});

通过使用 draggable 和 droppable 交互，我可以更接近，但我无法将元素放到特定位置，就像我可以使用 sortable (jsfiddle here):

$(function() {

    $( "#sortable1 li" ).draggable({
        appendTo: "body",
        helper: "clone"
    });
    $( "#sortable2" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            $( this ).find( ".placeholder" ).remove();
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});

Answer 1

我找到了解决办法。这是修复后的代码：

$(function() {

    $( "#sortable1 li" ).draggable({
        appendTo: "body",
        helper: "clone"
    });
    $( "#sortable2" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {

            if ($(this).find(".placeholder").length > 0) //add first element when cart is empty
            {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text()).appendTo(this);
            } else {
                var i = 0; //used as flag to find out if element added or not
                $(this).children('li').each(function () {

                    if ($(this).offset().top >= ui.offset.top) //compare
                    {
                        $("<li></li>").text(ui.draggable.text()).insertBefore($(this));
                        i = 1;
                        return false; //break loop
                    }
                })

                if (i != 1) //if element dropped at the end of cart
                {
                    $("<li></li>").text(ui.draggable.text()).appendTo(this);
                }
            }
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});