jQuery

Question

我正在使用 jQuery Droppable UI。

我怎样才能停止在目标区域放置相同的元素。

Fiddle

Scenario:

我有一些菜单项，我可以将它们拖放到收藏夹 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

您可以使用 $( ".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 2

一种解决方案是像这样向可拖动列表元素添加值：

<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>

然后将可放置的事件侦听器添加到您希望放置到的容器中：

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

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

希望你明白了它的要点，我现在不能做一个完整的例子，但如果你需要更多，我可以稍后更新它。

Answer 3

这可以帮助你：

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

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

当容器-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

jQuery - 可放置区域不应允许重复并计算放置的 <li> 个元素

jQuery - Droppable area should not allow duplicates and count the dropped <li> elements

jquery-ui

jquery-ui-draggable

jquery-ui-droppable

Fiddle