javascript - 给定两个连接的Sortable JQuery列表，我如何知道元素放置在哪个容器上？

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

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

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

有人知道如何在stop方法中辨别吗？

对于以下示例，您可以从左到右来回拖放。您还可以拿起一个项目并在列表的右侧上下移动。

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

码

$("#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>

最佳答案

双方都需要实施功能停止。
在此功能中，您可以使用：

var parent = ui.item.parent();

要获得ul容器。