求助：jQuery拖拽元素位置留存及拖拽后删除原DOM元素实现

问题描述 #

我正在使用jQuery Sortable及拖拽功能实现元素移除操作，需求是拖拽完成后从DOM中删除原元素。目前元素可以拖拽，但无法停留在放置位置，请求协助解决。

原代码 #

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<table style="border:5px solid red; width: 50%;">
  <tr>
    <td style="border:5px solid black">
      <ul>
        <li class="ui-state-highlight draggable">One</li>
        <li class="ui-state-highlight draggable">Two</li>
      </ul>
    </td>
    <td>
      <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
      </ul>
    </td>
  </tr>
</table>

CSS

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

JavaScript

$(function() {
  $("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
      if (!ui.item.data('tag') && !ui.item.data('handle')) {
        ui.item.data('tag', true);
        ui.item.fadeTo(400, 0.1);
        ui.item.remove();
      }
    }
  });

  $(".draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });
  $("ul, li").disableSelection();
});

问题原因 #

原代码中#sortable的stop事件会在拖拽完成后立即移除刚添加的元素（因为新元素没有tag数据），这是导致元素无法停留的根本原因；同时原拖拽元素的删除逻辑也未正确触发。

修正后的代码 #

JavaScript

$(function() {
  $("#sortable").sortable({
    revert: true
  });

  $(".draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    // 拖拽结束后处理原元素删除
    stop: function(event, ui) {
      // 检查是否成功放置到sortable容器中
      if ($(ui.helper).hasClass('ui-sortable-helper')) {
        $(this).remove(); // 删除原拖拽元素
      }
    }
  });
  $("ul, li").disableSelection();
});

修改说明 #

1. 移除了#sortable的stop事件中移除元素的逻辑，确保拖拽进来的元素能正常停留在目标容器。
2. 在.draggable的stop事件中，通过判断helper是否带有ui-sortable-helper类（jQuery UI自动添加的类，标识成功放置到sortable），触发原拖拽元素的删除操作。

内容的提问来源于stack exchange，提问作者user819774