jQuery可排序的可拖动或可拖放的多个列表到一个列表并还原

debugcn 发表于 Dev

用户970008

我正在制作可排序的杂货清单，但我无法找出从排序清单中删除某项并将其返回原始类别的最佳方法。

<!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到底如何工作。使用可拖动，可放置或可排序的组合，这似乎已经解决了问题。如果将每个类别的项目从可排序项中删除，则应仅返回该项目。

例如，将奶酪拖到杂货店列表中，然后将其拖出有边框的可排序的列表，然后将其删除。奶酪应该回到乳制品清单。

曲折的

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

$(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相同的操作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。