[英]in a jQuery sortable connected to a draggable list, how can I tell the particular list item that the draggable item was dropped onto?
考虑以下几对列表:
user's queue
<ul id='list1'>
<li>Some</li>
<li>Thing</li>
</ul>eligible items
<ul id='list2'>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Electric Banana</li>
<li>Flamingo Pink</li>
</ul>
<script>
jQuery(function($) {
$('#list2 li').draggable({
cursor: 'move',
helper: 'clone',
connectToSortable: "#list1",
update: function(event, ui){
// In here, I can get the item being dragged by inspecting
// event.toElement (and probably other ways as well), and
// I can find the list I am dropping onto by inspecting
// event.target.
// But, how do I tell what particular list item in the "user's
// queue" (#list1) list that the item is being dropped onto?
// E.g., if I drop "Green" onto "Thing", so it displaces "Thing",
// and the list now contains "Some, Green, Thing", how can I tell
// here in code that "Green" was dropped onto "Thing"?
}
});
$('#list1').sortable({
revert: true,
});
});
</script>
代码中的注释概述了我的问题。 重复一遍,我想知道如何以编程方式确定可拖动元素放置到的特定列表项?
如果您是指sortable的更新,则可以执行以下操作:
$('#list1').sortable({
revert: true,
update: function(event, ui){
ui.item.prev().css('color', 'green'); //get the prev element of item sorted just now, applies for the dropped as well
ui.item.next().css('color', 'blue');//get the next element of item sorted just now, applies for the dropped as well
}
});
像这样吗
$('#list1').sortable({
revert: true,
update: function(event, ui){
$('.next, .prev').removeClass('next prev');
var $prevElem = ui.item.prev(),
$nextElem = ui.item.next();
$prevElem.addClass('prev');
$nextElem.addClass('next');
console.log('Item sorted is before ' + $prevElem.text() + ' after ' + $nextElem.text());
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.