防止在jQueryUI sortable中出现重复项

Question

防止在jQueryUI sortable中出现重复项

javascriptjqueryhtmljquery-uijquery-ui-sortable

3

我试图通过条件判断来防止重复的项目从#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>

- RedGiant

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RedGiant · Accepted Answer

我找到了一个解决方案。原始示例会删除所有标题相同的图像，所以我的方法是使用 img.filter(":gt(0)").remove(); 只删除第一个重复项。

示例

$("#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.filter(":gt(0)").remove();
     }
     ui.sender.data('copied', true);
    }
});

$('#sort2').on('click','img',function(){
    $(this).remove();
});