![](/img/trans.png)
[英]How to avoid a draggable element to be dropped in a certain sortable location in jquery?
[英]jQuery UI draggable element dropped into sortable
我有一个可拖动项目列表,我希望能够将它们拖到可排序的内容块上。 这是我的标记:
<div class='items'>
<div class="one">One</div>
<div class="two">Two</div>
</div>
<div class="content">
<div class="block">Foo</div>
<div class="block">Bar</div>
</div>
问题是,我希望拖动的项目在拖动开始时“成为”一个块,并在它被删除时保持一个块。 我试过这个:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
connectToSortable: ".content"
});
$('.content').sortable();
小提琴: http : //jsfiddle.net/MF4qu/
但即使我创建一个看起来像块的自定义帮助器,它一旦被删除就会恢复到原始拖动的元素。 有谁知道如何在我的示例页面中正确插入一个块? 我已经查看了UI API,但我无法弄明白。
当draggable元素被放入sortable时,它会触发可排序的update
事件。 一种解决方案是侦听该事件,并将删除的项目转换为块:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
connectToSortable: ".content"
});
$('.content').sortable({
update: function (event, ui) {
ui.item.addClass('block');
}
});
工作演示: http : //jsfiddle.net/DaXuT/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.