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

Question

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

在我的 stop() 方法中，我需要确定物品掉落在哪个容器上。

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

有谁知道如何在停止方法中辨别这一点？

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

但是，我无法在 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>

Answer 1

在双方你都需要实现de函数stop。在这个函数中你可以使用：

var parent = ui.item.parent();

获取ul容器。

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

Given two connected Sortable JQuery lists, how can I know which container an element was dropped on?

javascript

jquery

jquery-ui

jquery-ui-sortable

代码