if(selected_end_index>=selected_begin_index){
for(var i=selected_begin_index;i<=selected_end_index;i++){
_selectable.children("li").eq(i).addClass("ui-selected");
}
}else{
for(var i=selected_end_index;i<=selected_begin_index;i++){
_selectable.children("li").eq(i).addClass("ui-selected");
}
}
}
}).on("mouseup",".selectable>li",function(e){
var _selectable= $(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //没有按下Ctrl或Shift键
_selectable.children("li").removeClass("ui-selected");
$(this).addClass("ui-selected");
}
});
//调用拖拽事件并重新规划处理方式
$("#mydrag .selectable>li").draggable({
revert: "invalid",
containment: "document",
cursor: "default",
distance:10,
zIndex:9,
opacity:0.5,
cursorAt: {
left: 20,
top:40
},
connectToSortable:"#mydrag .sample-group>ol",
helper:function(event,ui){
var drag_info_box=$("<div></div>").addClass("drag_info_box");
drag_info_box.append($("<span></span>"));
drag_info_box.append($('<input type="hidden" />'));
return drag_info_box;
},
start: function( event, ui ) {
var _drag_ele=ui.helper;
_drag_ele.children("span").eq(0).text($("#mydrag .selectable>li.ui-selected").length);
var selected_li_seq="";
$("#mydrag .selectable>li.ui-selected").each(function(){
selected_li_seq+= $("#mydrag .selectable>li").index(this)+",";
});
_drag_ele.children("input").eq(0).val(selected_li_seq.substr(0,selected_li_seq.length-1));
},
stop:function( event, ui ) {
$(".selectable li").removeClass("ui-selected");
}
});
$("#mydrag .sample-group>ol").droppable({
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
//这块如果是拖放到排序面板会执行两次,将该内容放到排序的stop方法中
}
});
//排序完毕后执行真正的释放操作
$( "#mydrag .sample-group>ol" ).sortable({
revert: true,
stop: function( event, ui ) {
if(ui.item.hasClass("drag_info_box")){
var selected_li_arr=ui.item.children("input").eq(0).val().split(',');
for(var i=0;i<selected_li_arr.length;i++){
var _group_li_=$("<li></li>")
.addClass("ui-state-highlight ui-sortable-handle").text($("#mydrag .selectable>li").eq(selected_li_arr[i]).text());
