我试图通过条件判断来防止重复的项目从#sort
被拖到#sort2
中,条件是基于#sort2
中项目的title属性是否相同。如果有重复,它会在添加新项目之前删除旧项目。
$("#sort2").sortable({
receive: function (e, ui) {
var title = ui.item.attr('title');
var img = $('#sort2').find('img[title="'+title+'"]');
console.log(title);
if(img.length)
{
img.remove();
}
ui.sender.data('copied', true);
}
});
但是我的尝试失败了,它只是在任何项目被拖放到#sort2
中时立即删除该项目。有人能给我展示如何做吗?
$("#sort").sortable({
connectWith: ".connectedSortable",
helper: function (e, li) {
this.copyHelper = li.clone().insertAfter(li);
$(this).data('copied', false);
return li.clone();
},
stop: function () {
var copied = $(this).data('copied');
if (!copied) {
this.copyHelper.remove();
}
this.copyHelper = null;
}
});
$("#sort2").sortable({
receive: function (e, ui) {
var title = ui.item.attr('title');
var img = $('#sort2').find('img[title="'+title+'"]');
console.log(title);
if(img.length)
{
img.remove();
}
ui.sender.data('copied', true);
}
});
$('#sort2').on('click','img',function(){
$(this).remove();
});
HTML:
<div class='connectedSortable' id='sort'>
<img title='AAA' src='http://upload.wikimedia.org/wikipedia/commons/7/7f/Wikipedia-logo-en.png'/>
<img title='BBB' src='http://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/32px-Wikisource-logo.svg.png'/>
</div>
<div class='connectedSortable' id='sort2'></div>