Я пытаюсь настроить сортировку jQuery, которая будет а) позволять выбирать несколько элементов, и б) после перетаскивания - сохранит оригинальные элементы в своих список. У меня отключена часть выбора нескольких элементов, но я не могу сохранить элементы в их оригинальной коробке.
Я создал пример того, что у меня есть на JSFiddle: http://jsfiddle.net/ncsujenn/hQnWG/2518/
В этом примере вы сможете перетаскивать несколько пицц одновременно на пиццу. Пицца 1, 2 и 3 должны иметь возможность иметь Пепперони и Колбасу - но начинки исчезают из списка после одного использования. Поэтому, когда в Пицце 1 есть Пепперони и Колбаса, у Пиццы 2 нет другого выбора, кроме как выбрать овощи.
HTML
<ul id="pizzas">
<li>Pizza 1</li>
<li>Pizza 2</li>
<li>Pizza 3</li>
</ul>
<ul id="toppings">
<li class="draggable">Pepperoni</li>
<li class="draggable">Sausage</li>
<li class="draggable">Mushrooms</li>
<li class="draggable">Olives</li>
<li class="draggable">Onion</li>
</ul>
JQuery
$("ul").on('click', 'li', function(e) {
if (e.ctrlKey || e.metaKey) {
$(this).toggleClass("selected");
} else {
$(this).addClass("selected").siblings().removeClass('selected');
}
});
$("#pizzas, #toppings").sortable({
connectWith: "#pizzas",
delay: 150,
revert: 0,
helper: function(e, item) {
//Manage selection class
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) {
//Get stored multi selected items
var elements = ui.item.data('multidrag');
// Handle duplicates in receiving box
ui.item.after(elements).remove();
}
}).disableSelection();
CSS
ul {
border: 1px solid Black;
width: 300px;
height: 200px;
display: inline-block;
vertical-align: top
}
li {
background-color: Azure;
border-bottom: 1px dotted Gray
}
li.selected {
background-color: GoldenRod
}
#toppings {
cursor: pointer;
}