Javascript jQuery Sortable-如果拖出，则将项目移动到列表顶部。

您好，我使用的是jquerysortable，我有两个列表，其中充满了横幅，并且可以更改“所选横幅”中横幅的顺序。我们有3套横幅：

• 默认横幅（由公司设置，除非选择2个或更多横幅，否则必须设置）
• 特殊横幅（由公司设置，但非强制性）
• 可选横幅（可供选择的通用横幅）

我有两个列表，一个称为可用横幅，另一个称为选定横幅。默认横幅以红色定义，如果存在两个或更多横幅，则可以删除

但是，当我删除这些默认横幅时，它们要么被放置在列表的底部，要么被放置在我放置它们的位置，这取决于放置的精度

使用jQuery我可以将所有类名为defaultbanner的项目移动到#sortable2列表的顶部吗

我的代码在下面，或者您可以查看我的

JS.JS

$（文档）.ready（函数（）{
$（函数（）{
$（“#可排序1”）。可排序({
取消：“.ui状态已禁用”，
句柄：“：非（输入）”
});
$（“#可排序2”）。可排序({
取消：“.ui状态已禁用”，
接收：功能（事件、用户界面）{
if（ui.item.hasClass（“defaultbanner”））{
$（ui.sender）.sortable（'cancel'）；
警报（“这是一个默认横幅，可以排序但不能删除。”）；
}
}
});
//新功能定义，如果合作伙伴有两个以上的可选横幅，则默认横幅。如果少于两个可选横幅，则不能使用默认横幅
$（“#可排序2”）。可排序({
取消：“.ui状态已禁用”，
接收：功能（事件、用户界面）{
if（ui.item.hasClass（“defaultbanner”）&&$（“#sortable1 li”）。长度7）{
//ui.sender:将取消更改。在“接收”回调中很有用。
$（ui.sender）.sortable（'cancel'）；
警报（'您的选择已被取消。转盘中最多允许7个横幅'）；
}
如果（$（'#sortable1.selectablebanner'）。长度>4）{
警报（'您的选择已被取消。转盘中最多允许4个自定义横幅'）；
$（ui.sender）.sortable（'cancel'）；
}  
}
}).disableSelection（）；
});
});

是，只需添加一个伪

排序

函数作为

receive

function doSortMe(){
        console.log('sorting');
         $('#sortable2').prepend($('#sortable2 .defaultbanner'));  
    }
/////    .....
        $("#sortable2").sortable({
            cancel: ".ui-state-disabled",
            receive: function (event, ui) {
                if (ui.item.hasClass("defaultbanner") && $('#sortable1 li').length <= 1) {
                    $(ui.sender).sortable('cancel');
                    alert("This is a default banner, it can be sorted but not removed.");
                } else if ($('#sortable1 li').length <= 1) {
                    $(ui.sender).sortable('cancel');
                    alert('You must have at least two banners');
                }
                doSortMe(); //<-- Added call here
            }
        });

函数doSortMe（）{
console.log（'sorting'）；
$（'#sortable2'）。前置（$（'#sortable2.defaultbanner'）；
}
/////    .....
$（“#可排序2”）。可排序({
取消：“.ui状态已禁用”，
接收：功能（事件、用户界面）{
if（ui.item.hasClass（“defaultbanner”）&&$（“#sortable1 li”）.length
function doSortMe(){
        console.log('sorting');
         $('#sortable2').prepend($('#sortable2 .defaultbanner'));  
    }
/////    .....
        $("#sortable2").sortable({
            cancel: ".ui-state-disabled",
            receive: function (event, ui) {
                if (ui.item.hasClass("defaultbanner") && $('#sortable1 li').length <= 1) {
                    $(ui.sender).sortable('cancel');
                    alert("This is a default banner, it can be sorted but not removed.");
                } else if ($('#sortable1 li').length <= 1) {
                    $(ui.sender).sortable('cancel');
                    alert('You must have at least two banners');
                }
                doSortMe(); //<-- Added call here
            }
        });