如何通过使用 Jquery 执行 DND 来删除表中动态创建的行？答案

【问题标题】：How to remove Dynamically created row in the table by performing DND using Jquery?如何通过使用 Jquery 执行 DND 来删除表中动态创建的行？
【发布时间】：2014-11-04 15:08:14
【问题描述】：

我需要通过在左侧表上执行拖放操作从右侧表中删除该行。将该行从 Table2 拖动到 Table1 应该从 Table2 表中删除该行。

这是我的代码：

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<title>Insert title here</title>
<style>
ul {
    list-style: none;
    padding: 0;
    min-height: 12em;
}

li:nth-child(1n) {
    background-color: #a6dbed;
}

div {
    float: left;
    margin: 10px;
    border: 1px solid black;
    min-width: 40%;
}

li {
    cursor: all-scroll;
}
</style>
<script>
    $(function() {

        $("#sortable2").sortable(
                {
                    receive : function(event, ui) {
                        var pasteItem = checkList("sortable2",
                                $(this).data().uiSortable.currentItem);
                        if (!pasteItem) {
                            $(this).data().uiSortable.currentItem.remove();
                        }
                    }
                });

        $("#sortable1 li").draggable({
            connectToSortable : "#sortable2",
            helper : "clone",
            revert : "invalid"
        });
    });

    function checkList(listName, newItem) {
        alert 
        var dupl = false;
        $("#" + listName + " > li").each(function() {
            if ($(this)[0] !== newItem[0]) {
                if ($(this).html() == newItem.html()) {
                    dupl = true;
                }
            }
        });
        return !dupl;
    }
</script>
</head>
<body>
    <div>
        <h3>Available Institutions</h3>
        <ul id="sortable1" class="connectedSortable">
            <li class="ui-state-default" id="k1">Items1</li>
            <li class="ui-state-default" id="k2">Items2</li>
            <li class="ui-state-default" id="k3">Items3</li>
            <li class="ui-state-default" id="k4">Testing4</li>
            <li class="ui-state-default" id="k5">Testing5</li>
        </ul>
    </div>
    <div>
        <h3>Institutions to the Group</h3>
        <ul id="sortable2" class="connectedSortable">
        </ul>
    </div>
</body>
</html>

【问题讨论】：

实际上你想要达到什么目的..？该功能有什么作用..？为什么你不能让两个列表都连接排序......？
我能做到。但我希望 table1 的值稳定。 Connected sortable 将从 table1 中删除值。我不想要那个。如果我们将表 2 中的值拖放到表 1 中，我想删除表 2 中的值。

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-sortable

【解决方案1】：

要删除放入第一个列表的项目，您也应该将其初始化为droppable()。您可以使用它的drop 事件回调删除该项目，如下所示：

$(function() {

  $("#sortable1 li").draggable({
    connectToSortable: "#sortable2",
    helper: "clone",
    revert: "invalid",
  }).droppable({
    drop: function(event, ui) {
      if (ui.draggable.parent().attr("id") == "sortable2")
        ui.draggable.remove(); // remove the item
    }
  });

  $("#sortable2").sortable({
    receive: function(event, ui) {
      var pasteItem = checkList("sortable2",
        $(this).data().uiSortable.currentItem);
      if (!pasteItem) {
        $(this).data().uiSortable.currentItem.remove();
      }
    }
  });
});

function checkList(listName, newItem) {
  alert
  var dupl = false;
  $("#" + listName + " > li").each(function() {
    if ($(this)[0] !== newItem[0]) {
      if ($(this).html() == newItem.html()) {
        dupl = true;
      }
    }
  });
  return !dupl;
}

ul {
  list-style: none;
  padding: 0;
  min-height: 12em;
}
li:nth-child(1n) {
  background-color: #a6dbed;
}
div {
  float: left;
  margin: 10px;
  border: 1px solid black;
  min-width: 40%;
}
li {
  cursor: all-scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div>
  <h3>Available Institutions</h3>

  <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id="k1">Items1</li>
    <li class="ui-state-default" id="k2">Items2</li>
    <li class="ui-state-default" id="k3">Items3</li>
    <li class="ui-state-default" id="k4">Testing4</li>
    <li class="ui-state-default" id="k5">Testing5</li>
  </ul>
</div>
<div>
  <h3>Institutions to the Group</h3>

  <ul id="sortable2" class="connectedSortable"></ul>
</div>

【讨论】：

非常感谢！！您的解决方案解决了我的一个答案，但另一方面，它又带来了一个问题。实际上，当我们对 Table1 中的项目进行排序时。由于“ui.draggable.remove();”而实际删除的项目； // .你能帮我吗:)
@NarenPamsa 这可以解决......但我不明白你在说什么 - “当我们对 Table1 中的项目进行排序时”。 #sortable1（假设您指的是Table1）是draggable()，而不是sortable()，那么您如何对其中的项目进行排序..？此外，即使您的自定义代码没有阻止功能，它也会引发错误。因此，如果您可以更新解释您总体上要做什么的问题，也许我也可以提供帮助。顺便说一句，那些不是表格，那些是列表，如果你使用这些术语会很容易理解.. :)
好的。对不起。实际上，如果我从#sortable1 中拖动一个项目，并且假设我将项目放在#sortable1 表本身中，那么它就会从#sortable1 表中删除。我不希望这种情况发生。你能帮我么。我希望项目在#sortable1 表中保持稳定。