Question

我在表单上有两个可排序的容器。这些容器用于来回移动列以进行动态报告。由于两个容器彼此连接，用户可以从左到右拖放项目，反之亦然，或者用户可以单击并拖动项目并将其放回原始容器上。

在我的stop()方法中，我需要确定放置项目的容器。

通过查看传递给stop事件的sender参数中的ui值，您始终可以知道原始容器。但是，我似乎无法找到任何文档或任何示例来解释如何知道放置元素的最终容器。

有人知道如何在stop方法中识别这个吗？

关于下面的示例，您可以从左向右来回拖放。您还可以选择一个项目并在右侧，列表中上下移动它。

但是，我无法在stop:...事件方法中知道哪个容器收到了该元素。

CODE

$("#left-side").sortable({
  connectWith: "#right-side",
  update: function(e, info) {
    $(this).find('li').sort(function(a, b) {
        return +a.dataset.sort - +b.dataset.sort;
      })
      .appendTo(this);
  }
});
$("#right-side").sortable({
  connectWith: "#left-side",
  stop: function(e, ui) {
    ui.item.after(ui.item.find("li"))
    //
    // How can I determine which side the element was dropped on?
    //
  }
});
$("#left-side, #right-side").find('li').attr('data-sort', function() {
  return $(this).index('body ul.ui-sortable li');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
  ul {
    border: 1px solid Black;
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: top
  }
  
  li {
    background-color: Azure;
    border-bottom: 1px dotted Gray
  }

</style>
<h1>Click items to select them</h1>
<ul id="left-side">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ul id="right-side">
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

Answer 1

在双方都需要实现de function stop 。在此功能中，您可以使用：

var parent = ui.item.parent();

获取ul容器。

给定两个连接的可排序JQuery列表，如何知道哪个容器被删除？

CODE

1 个答案: