jquery - jquery ui sortable receive(e,ui)，如何获取传入元素的子元素以便可以显示()？

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 在下面发布了答案，但简而言之，答案是在 sortable 上使用停止事件而不是接收事件。

Answer 1

在receive事件中，ui.item将包含一个包装拖动元素的 jQuery 对象。您可以将children()或find()与类选择器一起使用来匹配其子元素：

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

你会在这里找到一个更新的小提琴。

Answer 2

您可以使用可排序插件上的停止功能来访问正在放置在列表中的项目。

$('#sortable').sortable(
{
    stop: function( event, ui )
{
    $(ui.item).html('your content here');
}
});

Answer 3

尝试使用 ui.item 属性。来自 jquery.ui 规范： ui.item - 当前拖动的元素。

receive: function(e, ui){
             var content = $(ui.item).children('div.child').html();
         }