Jquery 制作一个可选择的列表，也可以进行排序

我有一个可选择的列表，我想也排序。我还想禁用列表中的套索功能，因为可选列表可以通过单击而不是使用套索功能选择多个项目。当我尝试向代码中添加$（'#selective'）.sortable（）时，列表不再是可选择的，而是可排序的

这里有一个指向我的JSFIDLE的链接：

以下是我当前的javascript代码：

var $currentlySelected = null;
var selected = [];

$('#selectable').sortable();
$('#selectable').selectable({
start: function(event, ui) {
    $currentlySelected = $('#selectable .ui-selected');
},
stop: function(event, ui) {
    for (var i = 0; i < selected.length; i++) {
        if ($.inArray(selected[i], $currentlySelected) >= 0) {
          $(selected[i]).removeClass('ui-selected');
        }
    }
    selected = [];
},
selecting: function(event, ui) {
    $currentlySelected.addClass('ui-selected'); // re-apply ui-selected class to currently selected items
},
selected: function(event, ui) {
    selected.push(ui.selected); 
}
});

var$currentlySelected=null；
所选var=[]；
$（'#可选'）。可排序（）；
$（'#可选'）。可选({
开始：功能（事件、用户界面）{
$currentlySelected=$（“#selectable.ui selected”）；
},
停止：功能（事件、用户界面）{
对于（变量i=0；i=0）{
$（选中[i]）.removeClass（'ui-selected'）；
}
}
选定=[]；
},
选择：功能（事件、用户界面）{
$currentlySelected.addClass（'ui-selected'）；//将ui-selected类重新应用于当前选定的项
},
所选：功能（事件、用户界面）{
选中.推送（ui.选中）；
}
});

您可能无法同时执行这两项操作，因为可排序和可选择都在同一个单击事件上，只需给持有者排序即可

$('#selectable').sortable({ handle: ".holder" })//Make sortable on the handle
  .selectable({
    start: function(event, ui) {
        $currentlySelected = $('#selectable .ui-selected');
    }
    ,cancel: ".holder" //Cancel selection for holder
    ,
    stop: function(event, ui) {
        for (var i = 0; i < selected.length; i++) {
            if ($.inArray(selected[i], $currentlySelected) >= 0) {
              $(selected[i]).removeClass('ui-selected');
            }
        }
        selected = [];
    },
    selecting: function(event, ui) {
        $currentlySelected.addClass('ui-selected'); // re-apply ui-selected class to currently selected items
    },
    selected: function(event, ui) {
        selected.push(ui.selected); 
    }
}).find( "li" )
        .addClass( "ui-corner-all" )
         .prepend( 
             $('<div/>',
                 {'class':'holder'} )
            .append(
                 $('<span/>',
                     {'class':'ui-icon ui-icon-transfer-e-w'})
                  )
             );//Just prepend handle to li's or just addthem in your html itself and remove this section.

$（'#可选'）.sortable（{handle:“.holder”}）//在句柄上进行排序
.可选({
开始：功能（事件、用户界面）{
$currentlySelected=$（“#selectable.ui selected”）；
}
，取消：“.holder”//取消对holder的选择
,
停止：功能（事件、用户界面）{
对于（变量i=0；i=0）{
$（选中[i]）.removeClass（'ui-selected'）；
}
}
选定=[]；
},
选择：功能（事件、用户界面）{
$currentlySelected.addClass（'ui-selected'）；//将ui-selected类重新应用于当前选定的项
},
所选：功能（事件、用户界面）{
选中.推送（ui.选中）；
}
}).查找（“li”）
.addClass（“ui角全部”）
.prepend（
$('',
{'class'：'holder'}）
.附加(
$('',
{'class'：'ui-icon-ui-icon-transfer-e-w'}）
)
);//只需在li的句柄之前添加它们，或者只需将它们添加到html中并删除此部分。

---

如果您不想使用自己的图标，您可以使用它来指定您想要的图标。

您可能无法同时执行这两项操作，因为可排序和可选择都在同一个单击事件上，而只需指定一个保持器进行排序

$('#selectable').sortable({ handle: ".holder" })//Make sortable on the handle
  .selectable({
    start: function(event, ui) {
        $currentlySelected = $('#selectable .ui-selected');
    }
    ,cancel: ".holder" //Cancel selection for holder
    ,
    stop: function(event, ui) {
        for (var i = 0; i < selected.length; i++) {
            if ($.inArray(selected[i], $currentlySelected) >= 0) {
              $(selected[i]).removeClass('ui-selected');
            }
        }
        selected = [];
    },
    selecting: function(event, ui) {
        $currentlySelected.addClass('ui-selected'); // re-apply ui-selected class to currently selected items
    },
    selected: function(event, ui) {
        selected.push(ui.selected); 
    }
}).find( "li" )
        .addClass( "ui-corner-all" )
         .prepend( 
             $('<div/>',
                 {'class':'holder'} )
            .append(
                 $('<span/>',
                     {'class':'ui-icon ui-icon-transfer-e-w'})
                  )
             );//Just prepend handle to li's or just addthem in your html itself and remove this section.

$（'#可选'）.sortable（{handle:“.holder”}）//在句柄上进行排序
.可选({
开始：功能（事件、用户界面）{
$currentlySelected=$（“#selectable.ui selected”）；
}
，取消：“.holder”//取消对holder的选择
,
停止：功能（事件、用户界面）{
对于（变量i=0；i=0）{
$（选中[i]）.removeClass（'ui-selected'）；
}
}
选定=[]；
},
选择：功能（事件、用户界面）{
$currentlySelected.addClass（'ui-selected'）；//将ui-selected类重新应用于当前选定的项
},
所选：功能（事件、用户界面）{
选中.推送（ui.选中）；
}
}).查找（“li”）
.addClass（“ui角全部”）
.prepend（
$('',
{'class'：'holder'}）
.附加(
$('',
{'class'：'ui-icon-ui-icon-transfer-e-w'}）
)
);//只需在li的句柄之前添加它们，或者只需将它们添加到html中并删除此部分。

---

如果您不想使用自己的图标，您可以使用它来给出任何您想要的图标。

以下是我的解决方法，用于使列表可选择和排序，并允许套索实现。这是你的电话号码

jQuery UI可排序，可选择
$（函数（）{
//
$（'body'）。可选({
过滤器：“李”
//过滤器：'#album2>li'
});
/*
由于可排序对象似乎无法同时移动多个对象
时间，我们将这样做：
LIs应仅作为div的包装。
对LI排序时，移动所选LI的所有子级div
LIs到分拣LI内部（这将使它们一起移动）；
但在此之前，请在div中保存对其
各自的原始父母，因此我们可以稍后恢复他们。
当用户删除排序时，将div恢复到其原始状态
创建LIs的父项，并将这些LIs放置在刚刚丢弃的LI之后。
瞧！
小贴士：如果你试图将LIs插入LI中，效果就不太好了
*/
$（'.connectedSortable'）。可排序({
connectWith:“.connectedSortable”，
延误：100，
开始：功能（e、ui）{
var-topleft=0；
//如果未选择当前排序LI，请选择
$（ui.item）.addClass（'ui-selected'）；
$（'.ui selected div'）。每个（函数（）{
//保存对原始父级的引用
var originalParent=$（this.parent（）[0]；
$（此）.data（'origin'，originalParent）；
//在级联中定位每个DIV
$（this.css（'position'，'absolute'）；
$（this.css（'top'，topleft））；
$（this.css（'左'，左上角）；
左上角+=20；
}).appendTo（ui.item）；//将它们全部粘贴到当前排序LI中
},
停止：功能（e、ui）{
$（ui.item）.children（）.each（function（））{
//将排序列表中的所有div恢复为其原始父级
var originalParent=$（this.data（'origin'）；
$（this.appendTo（originalParent）；
//拆下级联定位
$（this.css（'位置'，''）；
$（this.css（'top'，''）；
$（this.css（'左'，''）；
});
//将所选LIs放在刚刚删除的排序LI之后
$（'#album.ui selected'）.insertAfter（ui.item）；