Question

我需要通过在左手侧表上执行拖放操作来从右手侧表中删除该行。将行从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>

Answer 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>

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

1 个答案: