jquery拖放允许2个元素

Question

我在jquery的拖放有一些麻烦。我想从每个'ul'只拖动1个元素。所以我想要的结果是红色框中的'测试'和'富'。我如何跟踪红色框中的元素？

下面是代码： http://jsfiddle.net/9edge/CTpTr/

thanx提前

Answer 1

填写两个不同的柜台，每个项目类型（给你的项目类，以确定它们）。

使用check（）函数检查您的限制，如果达到或不在，返回true/false，使用drop（）函数更新计数器。

$(function() { 
    var limit = 1; 
    var counter_test = 0; 
    var counter_foo = 0; 
    $("[id=drag]").draggable({ 
     revert: "invalid" 
    }); 
    $('#div1').droppable({ 
     accept: function(item) { 
      if ($(item).hasClass('test')) { 
       if (counter_test >= limit) { 
        return false; 
       } 
      } 
      else { 
       if (counter_foo >= limit) { 
        return false; 
       } 
      } 
      return true; 
     }, 
     drop: function(e, ui) { 
      if (ui.draggable.hasClass('test')) { 
       counter_test++; 
      } 
      else { 
       counter_foo++; 
      } 
     } 
    }); 
}); 
​ 

Fiddle

New Fiddle with IDs fixed

Answer 2

我更新了小提琴。 该解决方案只是稍微复杂一些是在这里：

http://jsfiddle.net/CTpTr/18/

正如你所看到的，我从li元素删除drag ID。一个id应该在网页中是唯一的。 您可以使用选择器另一个选择器（#lists li）使这些元素可拖动。 然后我使用了两个变量来跟踪在红色div中拖放的对象数量。 第一个是“限制”，第二个是“左”。

var limits = { test: 1, foo: 1}, left = 2; 

limits是从每个列表（基于自定义HTML5数据dragtype属性）允许的元素的数量，left是允许的元素的总数。 因此，举例来说，如果你想能够添加的类型“foo”的两个元素，和类型“测试”的一个，你可以使用

var limits = { test: 1, foo: 2}, left = 3; 

矿石，如果你想允许两个“foo”和一个“测试”，而是总两个元素， 你可以使用

var limits = { test: 1, foo: 2}, left = 2; 

正如你可以看到，这是一个有点比你要求的版本更加灵活。

每次删除元素时，放置事件处理程序都会使用drg.draggable（注意该函数的参数(e, drg)）及其类型draggable.data('dragtype')检索拖动的元素。

$(function() { 
    var limits = { test: 1, foo: 1}, 
     left = 2; 
    $("#lists li").draggable({ 
     revert: "invalid" 
    }); 
    $('#div1').droppable({ 
     drop: function(e, drg) { 
      var draggable = $(drg.draggable), 
       dragtype = draggable.data('dragtype'); 
      left -=1; 
      limits[dragtype] -= 1; 
      if (left == 0) { 
       $(this).droppable("disable"); 
       $('#lists li').draggable("disable"); 
      } 
      if (limits[dragtype] == 0){ 
       $('li[data-dragtype=' + dragtype +']').draggable('disable'); 
      } 
     } 
    }); 
});​ 

所以，如果只达到一种类型的li的限制，您可以仅禁用与$('li[data-dragtype=' + dragtype +']').draggable('disable')该类型元素的拖动功能。

要注意的一件重要的事情是添加另一种类型的列表是多么容易。例如，如果你想添加一个类型的“栏” li元素，都将添加一个ul元素这样

<ul class="bar"> 
    <li data-dragtype="bar">bar1</li> 
    <li data-dragtype="bar">bar2</li> 
    <li data-dragtype="bar">bar3</li> 
    <li data-dragtype="bar">bar4</li> 
</ul> 

，并相应设置limits和left变量，在不改变下降的事件处理程序的代码。例如：

var limits = { test: 1, foo: 1, bar: 2}, left = 4; 

Answer 3

解决方案的想法：http://jsfiddle.net/CTpTr/23/。您只能放置1个测试元素和1个foo元素，然后您仍然可以拖放，但droppable元素中不会接受放置。