我該如何限制一組可拖拽到一個droppable，另一組可拖拽到第二個可拖拽

Question

我有一個網站，我有一組可拖動的組件，我想限制它只顯示它的信息，當它被拖拽到一個特定的可拖拽。

這裏是我的代碼：

<script type = "text/javascript"> 

$(function() { 

    $(".draggablem").draggable({ 
     revert: true, 
     opacity: .75, 
     containment: '.container', 

     cursor: 'move', 
     cursorAt: { 
      top: 25, 
      left: 75 
     } 

    }); 

    $(".draggableo").draggable({ 
     revert: true, 
     opacity: .75, 
     containment: '.container', 
     cursor: 'move', 
     cursorAt: { 
      top: 25, 
      left: 75 
     } 

    }); 

    $(".dropable").droppable({ 
     activeClass: 'dragactive', 
     hoverClass: 'drophover', 
     drop: function(event, ui) { 
      $(this).addClass('drophighlight').find('p').html('<br />' + ui.draggable.children("span").text()); 
     } 
    }); 

    $(".dropable2").droppable({ 
     activeClass: 'dragactive', 
     hoverClass: 'drophover', 
     drop: function(event, ui) { 
      $(this).addClass('drophighlight').find('p').html('<br />' + ui.draggable.children("span").text()); 
     } 
    }); 

}); 
</script> 

我想限制.draggablem到.dropable和.draggableo到.dropable2。

非常感謝。

Answer 1

可放置選項有一個選項accept，您應該將其設置爲與您的可拖動項相匹配的選擇器。

$('.dropable2').droppable({ 
    ..., 
    accept: '.draggableo' 
)}; 

Answer 2

您的問題並不十分清楚。

您可以使用accept選項來定義允許刪除的內容，但這不是您說明問題的方式。

如果任何元素被允許被丟棄，而是當一個特定的類下降問題狀態只能說明：

$(".dropable").droppable({ 
    drop: function(event, ui) { 
     if (ui.draggable.is('.myAllowedClass')) { 
      /* do highlight*/  

     } 
    } 
});