如何使用accept參數將多個可拖動對象排序爲多個可拖放對象？ JQUERY

Question

我想將多個JQuery可拖放對象排序爲多個JQuery可拖放對象。

例如，我有三個項目紅色，藍色&綠色。 RED只能在RED BOX，綠色到綠色方塊& BLUE滴到藍盒子

<div class="draggable RED"> 
<p>RED ITEM</p> 
</div> 

<div class="draggable BLUE"> 
<p>BLUE ITEM</p> 
</div> 

<div class="draggable GREEN"> 
<p>GREEN ITEM</p> 
</div> 


<div class="droppable" title="RED"> 
<p>RED BOX</p> 
</div> 

<div class="droppable" title="BLUE"> 
<p>BLUE BOX</p> 
</div> 

<div class="droppable" title="GREEN"> 
<p>GREEN BOX</p> 
</div> 

這是我沒有成功嘗試JQuery的。

$(function() { 
    $(".draggable").draggable(); 
    $(".droppable").droppable({ 
    accept: '.'+$(this).attr("title"), 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
    $(this) 
    .addClass("ui-state-highlight") 
    .find("p") 
     .html("Dropped!"); 
    } 
    }); 
}); 

我不知道如何構造接受子句只接受匹配可拖動的title屬性的可拖動。

Answer 1

我想這可能幫助：

$(function() { 
    $(".draggable").draggable(); 

    $(".droppable").each(function (index){ 

     var title = '.'+$(this).attr('title'); 

     $(this).droppable({  
      accept: title, 
      activeClass: "ui-state-hover", 
      hoverClass: "ui-state-active", 
      drop: function(event, ui) { 
      $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
       .html("Dropped!"); 
      } 
      }); 
    }); 
});​