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的工作原理。使用可拖动，可放置或可排序的组合，这似乎已经解决了问题。每个类别的项目只有从可排序项中删除后，才应返回到该类别。

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

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

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

1 个答案: