Question

我正在尝试设置一个jQuery Sortable，它既可以a）允许选择多个项目，又可以b）一次拖放- 保留原始项目 在他们的清单中。我有多个项目选择部分，但是我无法让这些项目保留在其原始框中。

我已经建立了一个到目前为止我在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;
}

Answer 1

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

仔细查看api documentation，尤其是helper选项，该选项可让您克隆浇头。

jQuery Sortable拖放-选择多个项目并保留原稿

1 个答案: