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元素中不會接受放置。