Jquery Sortable Draggable or Droppable Multiple Lists to one List and Revert答案

【问题标题】：Jquery Sortable Draggable or Droppable Multiple Lists to One List and RevertJquery Sortable Draggable or Droppable Multiple Lists to one List and Revert
【发布时间】：2020-08-18 16:20:54
【问题描述】：

我正在制作一个可排序的购物清单，但我想不出从排序列表中删除一个项目并让它回到原始类别的最佳方法。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable + Sortable</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
  li { margin: 5px; padding: 5px; width: 150px; }
  #sortable {border: 1px solid #000; min-height:100px;}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable({
      connectWith: '.connectedList'
    });
    $( ".draggable" ).draggable({
      connectToSortable: "#sortable",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  } );
  </script>
</head>
<body>
<h3>Fruit</h3> 
<ul id="FruitCollection" class="fruits connectedList">
  <li class="draggable">Apples</li>
  <li class="draggable">Oranges</li>
</ul>
<h3>Meat</h3> 
<ul id="MeatCollection" class="meats connectedList">
  <li class="draggable">Beef</li>
  <li class="draggable">Chicken</li>
  <li class="draggable">Pork</li>
</ul>
<h3>Dairy</h3> 
<ul id="DairyCollection" class="dairy connectedList">
  <li class="draggable">Cheese</li>
  <li class="draggable">Milk</li>
  <li class="draggable">Sour Cream</li>
  <li class="draggable">Yogurt</li>
</ul>
 
 <h2>Grocery List</h2>
<ul id="sortable">
 
</ul>
 
 
</body>
</html>

我不确定 connectWith 是如何工作的。使用可拖动、可放置或可排序的组合，这似乎是一个已经解决的问题。每个类别的项目只有在从可排序对象中删除时才应返回给它。

例如，将 cheese 拖到购物清单中，然后通过将其拖出带边框的可排序来将其删除。奶酪应该回到乳制品清单。

【问题讨论】：

看这个例子来了解你的想法是如何工作的：jqueryui.com/droppable/#photo-manager 其次，Sortable 作为一个 Combo 工作。列表中的元素可以拖放回列表中。因此，新的 Dragged 项目也可以被带入列表中。

标签： jquery-ui jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

添加用户可以单击的删除类型的图标可能更容易。示例：

$(function() {
  function returnToList(item) {
    var t = $("." + $(item).data("list"));
    $(item)
      .detach()
      .appendTo(t);
    $(".ui-icon", item).remove();
  }

  function addDel(item) {
    $("<span>", {
      class: "ui-icon ui-icon-close"
    }).appendTo(item);
  }

  $("#sortable").sortable({
    stop: function(e, ui) {
      if ($(".ui-icon", ui.item).length < 1) {
        addDel(ui.item);
      }
    }
  });
  $(".items li").draggable({
    connectToSortable: "#sortable",
    revert: "invalid"
  });
  $("ul, li").disableSelection();

  $(".list").on("click", "li .ui-icon-close", function() {
    returnToList($(this).parent());
  });
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

li {
  margin: 5px;
  padding: 5px;
  width: 150px;
  position: relative;
}

.items {
  width: 175px;
  display: inline-block;
  float: left;
}

.grocery {
  width: 200px;
  display: inline-block;
  margin-left: 20px;
}

#sortable {
  border: 1px solid #000;
  min-height: 100px;
}

.list li span {
  position: absolute;
  right: 4px;
  padding: 2px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <div class="items list">
    <div class="ui-widget-header">Fruit</div>
    <ul id="FruitCollection" class="fruits">
      <li class="ui-widget-content" data-list="fruits">Apples</li>
      <li class="ui-widget-content" data-list="fruits">Oranges</li>
    </ul>
    <div class="ui-widget-header">Meat</div>
    <ul id="MeatCollection" class="meats">
      <li class="ui-widget-content" data-list="meats">Beef</li>
      <li class="ui-widget-content" data-list="meats">Chicken</li>
      <li class="ui-widget-content" data-list="meats">Pork</li>
    </ul>
    <div class="ui-widget-header">Dairy</div>
    <ul id="DairyCollection" class="dairy">
      <li class="ui-widget-content" data-list="dairy">Cheese</li>
      <li class="ui-widget-content" data-list="dairy">Milk</li>
      <li class="ui-widget-content" data-list="dairy">Sour Cream</li>
      <li class="ui-widget-content" data-list="dairy">Yogurt</li>
    </ul>
  </div>

  <div class="grocery list">
    <div class="ui-widget-header">Grocery List</div>
    <ul id="sortable"></ul>
  </div>

  <div class="ui-helper-clearfix"></div>
</div>

您可以使用 Drag 事件，但您需要一个目标。然后事件回调将执行与 Click 相同的操作。

【讨论】：