jquery ui sortable receive(e,ui)，如何获取传入元素的子元素以便我可以 show() 它？

Question

我正在对可排序列表使用接收事件，当从可拖动元素拖入元素时，我需要该事件能够更改元素的子元素之一的样式。这是一个简化的示例:

    <ul id="sortable">
      <li>element1<div class="child"></div></li>
      <li>element2<div class="child"></div></li>
    <ul>

    <ul id="draggable">
      <li>element3<div class="child"></div></li>
      <li>element4<div class="child"></div></li>
    <ul>

使用 JS:

    $('#sortable').sortable(
    {
          //extra stuff excluded

              receive: function(e, ui)
                         {
                            //how do I use ui to get the child element "child"?
                            //also I need to be able to style the current li element
                         }
    }
);

    $('#draggable').draggable(
            {
          connectToSortable: '#sortable'
            }
    );

*问题已解决:Frédéric Hamidi 在下面发布了答案，但简而言之，答案是在可排序对象上使用停止事件而不是接收事件。

Answer 1

在 receive 事件中，ui.item 将包含一个包裹拖动元素的 jQuery 对象。您可以使用children()或find()与 class selector匹配其子元素:

$("#sortable").sortable({
    receive: function(e, ui) {
        ui.item.css("color", "red");        // For example.
        ui.item.children(".child").show();  // Show child <div>.
    }
});

更新:由于您使用的是克隆助手，因此可以使用 ui.helper 而不是 ui.item。然而，这似乎并没有给出好的结果(可能是因为助手源自另一个小部件)。

另一个解决方案是处理 stop 事件而不是 receive。在那里，ui.item 始终是新元素，无论辅助选项如何:

$("#sortable").sortable({
    helper: "clone",
    items: "li",
    stop: function(e, ui) {
        ui.item.children(".child").show();
    }
});

您会发现更新的 fiddle here .