场景:拖动一个或多个元素并将其拖放到另一个列表中,但不从源列表中删除拖动的元素。
为了允许多次拖动,我使用了 Aaron Blenkush here发布的代码。
我已根据需要进行了更改,例如修复Shift问题。
$("ul").on('click', 'li', function (e) {
if (e.ctrlKey || e.metaKey) { //meta key for mac users
$(this).toggleClass("ui-selected");
$(this).parent().parent().siblings().children('ul').children().removeClass('ui-selected');
}
else if (e.shiftKey) {
// $(this).toggleClass("selected");
var list = $(this).parent();
var first = list.find('.ui-selected').first().index();
// var last = list.find('.selected').last().index();
var last = $(this).index();
if (first == -1 || last == -1) {
return false;
}
if (last < first) {
firstHolder = first;
first = last;
last = firstHolder;
}
for (i = first; i <= last ; i++) {
list.children().eq(i).addClass("ui-selected");
}
}
else {
$(this).addClass("ui-selected").siblings().removeClass('ui-selected'); //select only clicked element and unselecting other elements
//to Remove selected Class from 2nd UL li
$(this).parent().parent().siblings().children('ul').children().removeClass('ui-selected');
}
})
.sortable({
connectWith: "ul",
delay: 150, //Needed to prevent accidental drag when trying to select
revert: 0,
cursor: "move",
disabled: false,
placeholder: 'placeholder',
// handle: ".handle",
helper: function (e, item) {
//Basically, if you grab an unhighlighted item to drag, it will deselect (unhighlight) everything else
if (!item.hasClass('ui-selected')) {
item.addClass('ui-selected').siblings().removeClass('ui-selected');
}
//////////////////////////////////////////////////////////////////////
//HERE'S HOW TO PASS THE SELECTED ITEMS TO THE `stop()` FUNCTION:
//Clone the selected items into an array
var elements = item.parent().children('.ui-selected').clone();
//Add a property to `item` called 'multidrag` that contains the selected items, then remove the selected items from the source list
item.data('multidrag', elements)
//.siblings('.ui-selected').remove();
//Now the selected items exist in memory, attached to the `item`, so we can access them later when we get to the `stop()` callback
//Create the helper
var helper = $('<li/>');
return helper.append(elements);
},
start: function(event, ui) {
//$(ui.item).show();
var elements = ui.item.data('multidrag');
ui.item.after(elements);
//clone = $(ui.item).clone();
//before = $(ui.item).prev();
},
stop: function (e, ui) {
//Now we access those items that we stored in `item`s data!
var elements = ui.item.data('multidrag');
//`elements` now contains the originally selected items from the source list (the dragged items)!!
//Finally I insert the selected items after the `item`, then remove the `item`, since item is a duplicate of one of the selected items.
ui.item.after(elements).remove();
// $(ui.item).show();
//$(this).sortable('cancel');
}
});
问题:它会从源列表中删除已删除的元素。
我对这个问题进行了一些研究。有人说在helper方法中使用克隆,但是当我传递给返回多个元素的函数时,我无法使用clone。在Firebug中,当我拖动元素时,它会将 style = display:none 放在它们上,但是当我删除元素时,它会将它们从源列表中删除。
更新
我已经对接受的答案做了一些修改,以使其更简单
有一些问题,例如当li从第一个列表删除到第二个列表时。然后你将li从第2个拖回到第一个它将删除元素
解决方案 cld当项目被放入第二个列表时删除 ui-selected 类。
我希望它会帮助一些人:)
答案 0 :(得分:2)
好吧,我有一段时间搞砸了......以下如果我能想出那个时间最好......
var selected;
var selectedCurrent;
var temp;
var received = false;
$("ul").on('mousedown', 'li', function (e) {
if($(this).next('li').hasClass('pholder'))
$(this).next('li').remove();
if ((e.ctrlKey || e.metaKey) && selected != undefined) {
if($(this).text() != selectedCurrent.text())
selectedCurrent.after(selected.clone().addClass('pholder temp').hide());
}
selectedCurrent = $(this);
selected = $(this).clone().removeClass('selected');
});
$("ul").on('click', 'li', function (e) {
if(temp != undefined)
$('.temp').remove();
if (e.ctrlKey || e.metaKey) {
if($(this).next('li').hasClass('pholder'))
$(this).next('li').remove();
else
$(this).after($(this).clone().addClass('pholder').hide());
$(this).toggleClass("selected");
} else {
$(this).addClass("selected").siblings().removeClass('selected');
$('.pholder').remove();
}
}).sortable({
connectWith: "ul",
delay: 150,
revert: 0,
helper: function (e, item) {
if (!item.hasClass('selected')) {
item.addClass('selected').siblings().removeClass('selected');
}
var elements = item.parent().children('.selected').clone();
item.data('multidrag', elements).siblings('.selected').remove();
var helper = $('<li/>');
return helper.append(elements);
},
stop: function (e, ui) {
if(!received){
selected.remove();
$('.pholder').remove();
}
else{
received = false;
$('.pholder').removeClass('pholder');
}
var elements = ui.item.data('multidrag');
ui.item.after(elements).remove();
$('.selected').removeClass('selected');
},
start: function(event, ui){
ui.item.after(selected);
$('.pholder').show();
},
receive: function(event, ui){
received = true;
}
});
小提琴
http://jsfiddle.net/hQnWG/749/
<强>更新强>
http://jsfiddle.net/hQnWG/752/
更新2 - 删除列表中的重复项。