jQuery可排序拖放 - 选择多个项目并保留原始内容

Question

我正在尝试设置一个jQuery Sortable，它既包括a）允许选择多个项目，又b）一旦拖放 - 将原始项目保留在列表中。我有多个项目选择部分，但我无法让这些项目保留在原始框中。

我已经在JSFiddle上建立了一个例子：http://jsfiddle.net/ncsujenn/hQnWG/2518/

在这个例子中，您应该能够一次将多个披萨配料拖到比萨饼上。比萨饼1,2和3应该都能够有意大利辣香肠和香肠 - 但是一次使用后，配料就会从列表中消失。因此，一旦Pizza 1有Pepperoni和Sausage，Pizza 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;
}

Answer 1

这里有一个问题和答案：https://stackoverflow.com/a/7209451/203172

查看api documentation特别是helper选项，它将允许您克隆浇头。