Question

我正在使用receive事件作为可排序列表，我需要事件能够在从可拖动项中拖入元素时更改元素的其中一个子元素的样式。这是一个简化的例子：

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

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

您会找到更新的小提琴here。

Answer 2

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

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

Answer 3

您可以使用Sortable Plugin上的停止功能来访问列表中的项目。

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

jquery ui sortable receive（e，ui），如何获取传入元素的子节点以便我可以显示（）它？

3 个答案: