我正在对可排序列表使用接收事件,当从可拖动元素拖入元素时,我需要该事件能够更改元素的子元素之一的样式。这是一个简化的示例:
<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 在下面发布了答案,但简而言之,答案是在可排序对象上使用停止事件而不是接收事件。
最佳答案
在 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 .
关于jquery ui sortable receive(e,ui),如何获取传入元素的子元素以便我可以 show() 它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11663526/