Jquery 可将可拖动或可放置的多个列表排序为一个列表并还原

Question

我正在制作一个可排序的杂货清单，但我想不出从已排序的列表中删除某项并将其返回到原始类别的最佳方法。

<!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 的实际工作原理。看起来这是一个已经解决的问题，使用可拖动、可放置或可排序的组合。如果从可排序中删除，每个类别的项目应该只 return 返回它。

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

Answer 1

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

$(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>

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

Jquery 可将可拖动或可放置的多个列表排序为一个列表并还原

Jquery Sortable Draggable or Droppable Multiple Lists to One List and Revert

jquery-ui

jquery-ui-sortable

jquery-ui-draggable

jquery-ui-droppable