给定两个连接的可排序 JQuery 列表，我怎么知道元素被放在哪个容器上

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

本文关键字：元素 我怎么知道 列表 JQuery 两个 连接 排序      更新时间：2023-09-26

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

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

您始终可以通过查看传递给 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>

在两边你都需要实现 de 函数停止。在此函数中，您可以使用：

var parent = ui.item.parent();

获取 ul 容器。

相关文章：