Fiddle

方案：

我有菜单项，我可以删除相同的添加到Favs div或快速链接div或两个div来创建快捷方式。但是在下面的情况下，我该如何停止已经删除的元素重复。

HTML

<ul id="menulinks">
  <li>Menu Link 1</li>
  <li>Menu Link 2</li>
  <li>Menu Link 3</li>
  <li>Menu Link 4</li>
</ul>

<div class="addtofavs">
    <h4>Add to Favourites <span id="atf-count"></span></h4>
    <ul class="container">
    </ul>
</div>

<div class="addtoquicklinks">
    <h4>Add to Quicklinks <span id="atq-count"></span></h4>
    <ul class="container">
    </ul>
</div>

CSS

body{font-family:verdana;font-size:12px;}
ul{list-style-type:none;margin:0;padding:0; margin-bottom:10px;}
li{margin:5px;padding:5px;width:150px;border:1px solid #ddd;background:#fff;cursor:pointer;}
.container {position:relative;float:left;width:170px;border:1px solid #ff0000;margin-right:10px; min-height:100px; }
#memulinks{clear:both;display:block;}
.addtofavs,.addtoquicklinks{float:left;width:250px;}
.addtofavs ul{background:#fef;border:1px solid #ddd;}
.addtoquicklinks ul{background:#efefef;border:1px solid #ccc;}
.addtofavs ul li,.addtoquicklinks ul li{border-color:#222;}
h4{margin:20px 0 0 0;font-size:14px;}
h4 span{font-weight:normal;font-size:12px;}
.ui-state-highlight{background:#000;height:1px;padding:0;border:none;}

的jQuery

$(function() {
    var x = $( ".addtofavs li" ).length;
    var y = $( ".addtoquicklinks li" ).length;
    $( "#atf-count" ).text(x);
    $( "#atq-count" ).text(y);

    $("#menulinks li").draggable({
      connectToSortable: '.container',
      helper: 'clone',
      revertDuration: 0
    });

    $(".container").sortable({
        connectWith: '.container',
        placeholder: "ui-state-highlight",
      revert: true
    });

    $(".container li").draggable({
      connectToSortable: '.container',
        placeholder: "ui-state-highlight",
      revert: true,
    });


    $("ul, li").disableSelection();

});

Answer 1

这可以帮到你：

将数据属性分配给原始列表以供参考：

 $("#menulinks li").draggable({
    connectToSortable: '.container',
    helper: 'clone',
    revertDuration: 0,
    create: function () {
        var eq = $(this).index();
        $(this).attr('data-index', eq);
    }
});

当container-div收到新元素时，检查此元素是否已存在，如果是，则删除最后添加的元素：

 $(".container").sortable({
    connectWith: '.container',
    placeholder: "ui-state-highlight",
    receive: function (event, ui) {
        var uiIndex = ui.item.attr('data-index');
        var item =  $(this).find('[data-index=' + uiIndex + ']');
        if (item.length > 1) {
          item.last().remove();
        }
    },
    revert: true
});

Demo

旁注：在接收函数中对新添加的项的引用可能会更容易，但是有一个已知错误可以解决这个问题：

http://bugs.jqueryui.com/ticket/4303

<强>参考

.draggable() - create

.sortable() - receive

Answer 2

您可以使用$( ".selector" ).draggable( "disable" );停用可拖动元素（请参阅jquery reference。

要检测最近拖动的项目，我建议使用this回答

中提供的代码

drop: function(ev, ui) {
             //to get the id
             //ui.draggable.attr('id') or ui.draggable.get(0).id or ui.draggable[0].id
             console.dir(ui.draggable)  
}

Answer 3

一种解决方案是将值添加到可拖动列表元素中，如下所示：

<ul id="menulinks">
  <li value="1">Menu Link 1</li>
  <li value="2">Menu Link 2</li>
  <li value="3">Menu Link 3</li>
  <li value="4">Menu Link 4</li>
</ul>

然后将droppable事件侦听器添加到要删除的容器中：

$(".container").droppable({
    drop: function(event, ui) {
        var val = $(ui.draggable).val();
    }
});

删除元素时，检查删除的值是否已经在框中。

希望你得到它的要点，我现在无法做出完整的例子，但如果你需要更多的话我可以稍后更新。

jQuery - Droppable区域不应该允许重复并计算丢弃的<li>元素</li>

Fiddle

3 个答案: