jquery - 将LI从UL A拖到UL B并从UL A中删除？

Question

I have two lists and the second list is sortable and I can drag from the first list to the second list but can't figure out how to remove from the first list. 我有两个列表，第二个列表是sortable ，我可以从第一个列表拖到第二个列表，但无法弄清楚如何从第一个列表中删除。

The item ( li ) does get removed if I delete the helper: "clone" but then the drag and drop action works poorly (jerks around, not smooth). 如果删除helper: "clone" ，项目（ li ）会被删除helper: "clone"但拖放操作效果不佳（抖动，不平滑）。

(Bonus points - also remove the left UL when empty) （奖励积分 - 空的时候也删除左边的UL）

在此输入图像描述

Fiddle: http://jsfiddle.net/Nme9a/ 小提琴： http ： //jsfiddle.net/Nme9a/

<html>
  <head>
    <style>
    #categorizer { padding: 2px; }
    #list_to_process, #categories  { color: blue; background-color: green; border: solid; border-width: 4px }
    ul { padding: 10px; margin: 50px; float:left; list-style:none; }
    li { color: yellow; padding: 25px 80px; cursor: move; }
    li:nth-child(even) { background-color: #000 }
    li:nth-child(odd) { background-color: #666 }
  </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
      $(document).ready( function() {
        $("#categories").sortable({
          revert: true
        });
        $("li.to_process").draggable( {
          connectToSortable: "#categories",
          helper: "clone",
          revert: "invalid"
        });
      });
    </script>

  </head>
  <body>
    <div id="categorizer">
      <ul id="list_to_process">
        <li class="to_process" id="left1">1</li>
        <li class="to_process" id="left2">2</li>
        <li class="to_process" id="left3">3</li>
        <li class="to_process" id="left4">4</li>
      </ul>
      <ul id="categories">
        <li id="righta">a</li>
        <li id="rightb">b</li>
        <li id="rightc">c</li>
        <li id="rightd">d</li>
        <li id="righte">e</li>
      </ul>
    </div>
  </body>
</html>

Answer 1

You can pass a callback in a "receive" option to sortable(), like so: 您可以将“receive”选项中的回调传递给sortable（），如下所示：

  $(document).ready( function() {
    $("#categories").sortable({
      revert: true,
      receive: function(evt, ui) {
        ui.item.remove();
      }
    });
    $("li.to_process").draggable( {
      connectToSortable: "#categories",
      revert: "invalid",
      helper: "clone"
    });
  });

[EDIT from Michael] [来自Michael的编辑]

Note that I also added: 请注意，我还补充说：

$('#list_to_process li').length == 0) {
  $('#list_to_process').remove();
}

after the ui.item.remove(); 在ui.item.remove(); so that the empty UL which still had padding and borders, ie 这样空的UL仍然有填充和边框，即

在此输入图像描述

would be removed. 将被删除。

jquery - 将LI从UL A拖到UL B并从UL A中删除？

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-04-13 14:33:27

jquery - 将LI从UL A拖到UL B并从UL A中删除？

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-04-13 14:33:27

解决方案1
3 已采纳 2013-04-13 14:33:27