时间戳

首页 > 解决方案 > jQuery 可排序拖放 - 选择多个项目并保留原件

javascript - jQuery 可排序拖放 - 选择多个项目并保留原件

问题描述

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

我已经在 J​​SFiddle 上设置了一个示例：http: //jsfiddle.net/ncsujenn/hQnWG/2518/

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

标签： javascriptjqueryhtmljquery-uijquery-ui-sortable

解决方案

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

查看api 文档，特别是帮助您克隆浇头的帮助选项。

推荐阅读