jquerydrag&；删除可排序的连接列表

从上的示例开始，我尝试禁用左侧列表上的排序，左侧的项目必须复制而不是移动， 有可能吗

通过使用draggable和dropable交互，我可以更接近，但我不能像使用sortable（）那样将元素放到特定位置：

$（函数（）{
美元（“#可排序1 li”）。可拖动({
附：“身体”，
助手：“克隆”
});
$（“#可排序2”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“
”）.text（ui.draggable.text（））.appendTo（this）；
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
$（this.removeClass（“ui状态默认”）；
}
});
});

我找到了解决办法。以下是修复代码：

$(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" );
        }
    });
});

$（函数（）{
美元（“#可排序1 li”）。可拖动({
附：“身体”，
助手：“克隆”
});
$（“#可排序2”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
if（$（this）.find（“.placeholder”）.length>0）//在购物车为空时添加第一个元素
{
$（this.find（“.placeholder”）.remove（）；
$（“
”）.text（ui.draggable.text（））.appendTo（this）；
}否则{
var i=0；//用作标志以确定是否添加了元素
$（this）.children（'li'）。每个（函数（）{
if（$（this.offset（）.top>=ui.offset.top）//比较
{
$（“
”）.text（ui.draggable.text（））.insertBefore（$（this））；
i=1；
返回false；//中断循环
}
})
if（i！=1）//if元素在购物车的末尾被丢弃
{
$（“
”）.text（ui.draggable.text（））.appendTo（this）；
}
}
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
$（this.removeClass（“ui状态默认”）；
}
});
});

$(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" );
        }
    });
});

$(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" );
        }
    });
});