如果div已经被删除，禁用drop [英] Disable drop if div has already been dropped?

问题描述

我已经创建了一个拖放游戏，以开始教我自己的jquery。一切似乎都在工作，但您可以将多个项目放在同一个Square上。我想要禁用droppable，如果占位符有一个图像。

我已经研究：

 `greedy：true` 
  

'不知道如何再次启用它，并且：

  $（this）.droppable（'disable'）; 
  

我可以得到这两个来禁用下拉，但不知道如何让他们再次启用它块/图片将恢复到原始位置或移动到另一个正方形。

完整版本：
http://creativelabel.co.uk/drag-and-drop/

更新：
这是可插拔插槽的代码。

  for（var i = 0; i& = 19; i ++）{
 var images ='images / slot'+ slotNumbers [i] +'.jpg'; 
 $（'< div class =placeholder>< div class =img-slot>< / div>< / div>'）attr（'id' '+ slotNumbers [i]）。data（'slotNumbers'，slotNumbers [i]）.appendTo（'#imgSlots'）.droppable（{
 accept：'#images img'，
 hoverClass：' hover'，
 drop：handleDropEvent，
 activate：handleDragEvent 
}）; 
  

这是 drop：事件代码： / p>

  function handleDropEvent（event，ui）{
 var slotNumber = $（this）.data（'slotNumbers'）; 
 var imgNumber = ui.draggable.data（'number'）; 
 ui.draggable.addClass（'dropped'）; 
 $（this）.droppable（'disable'）; 
 ui.draggable.position（{of：$（this），my：'right top'，at：'right top'}）; 
 
 if（slotNumber == imgNumber）{
 ui.draggable.addClass（'img-match'）; 
 ui.draggable.data（valid，true）; 
 
 imgMatch ++; 
} else {
 if（ui.draggable.data（valid））{
 imgMatch--; 
 ui.draggable.data（valid，false）; 
} 
} 
  

activate： code> code：

  function handleDragEvent（event，ui）{
 $（this）.droppable 'enable'）; 
 if（ui.draggable.data（valid））{
 imgMatch--; 
 $（'input [name = Score]'）。val（imgMatch）; 
 $（'＃score h1'）。text（imgMatch）; 
 ui.draggable.data（valid，false）; 
} 
} 
  




解决方案

文档（查看方法选项卡下）表示禁用您使用：

  $（this）.droppable（'disable'）; 
  

并启用您使用

  $（this）.droppable（'enable'）; 
  





---

更新：检查这个实例： http://jsfiddle.net/QqJRs/
将其中一个红色方块拖到大框上，放下（它变成绿色表示它掉落）。一个人在里面，你不能把任何其他人放到这个盒子里。
现在拖一个（它变成红色表示删除）。现在你可以放下任何其他的东西。

这个关键是我在下面的评论中所描述的。当您将一个项目放在容器中时，将容器与项目相关联：

  drop：function（event，ui）{
 ui.draggable.addClass（'dropped'）; //从你的代码和我以前改变颜色
 
 ui.draggable.data（'droppedin'，$（this））; //关联容器
 $（this）.droppable（'disable'）; //禁用droppable 
} 
  

然后再次拖动它时，启用：

  drag：function（event，ui）{
 if（$（this）.data（' '））{
 $（this）.data（'droppedin'）。droppable（'enable'）; v //重新启用
 $（this）.data（'droppedin'，null）; // de-associate 
 $（this）.removeClass（'dropped'）// remove class 
} 
} 
  

I've created a drag and drop game in order to start teaching myself jquery. Everything seems to be working but you can drop more than one item onto the same square. I want to disable droppable if the place holder has an image in it.

I've looked into:

`greedy: true`

That disables the drop but I'm not sure how to enable it again and also:

$(this).droppable( 'disable' );

I can get these both to disable the drop but not sure how I get them to enable it again if the block/image reverts back to its original position or is moved to another square.

Full version: http://creativelabel.co.uk/drag-and-drop/

UPDATE: This is the code for the droppable slots.

  for ( var i=0; i<=19; i++ ) {
  var images = 'images/slot' + slotNumbers[i] + '.jpg';
$('<div class="placeholder"><div class="img-slot"></div></div>').attr('id', 'slot'+slotNumbers[i]).data( 'slotNumbers', slotNumbers[i] ).appendTo( '#imgSlots' ).droppable( {
      accept: '#images img',
      hoverClass: 'hovered',
      drop: handleDropEvent,
      activate: handleDragEvent
});

This is drop: event code:

  function handleDropEvent( event, ui ) {
  var slotNumber = $(this).data( 'slotNumbers' );
  var imgNumber = ui.draggable.data( 'number' );
  ui.draggable.addClass( 'dropped' );
  $(this).droppable( 'disable' );
  ui.draggable.position( { of: $(this), my: 'right top', at: 'right top' } );

  if ( slotNumber == imgNumber ) {
    ui.draggable.addClass( 'img-match' );
    ui.draggable.data("valid", true);

    imgMatch++;
  }  else {
      if(ui.draggable.data("valid")) {
         imgMatch--;
         ui.draggable.data("valid", false); 
      }
  }

The activate: code:

  function handleDragEvent( event, ui ) {
   $(this).droppable( 'enable' );
   if(ui.draggable.data("valid")) {
         imgMatch--;
         $('input[name=Score]').val(imgMatch);
         $('#score h1').text(imgMatch);
         ui.draggable.data("valid", false); 
   }
 }

解决方案

The docs(Look under "methods" tab) indicate that to disable you use:

$(this).droppable( 'disable' );

And to enable you use

$(this).droppable( 'enable' );

---

Update: Check this live example: http://jsfiddle.net/QqJRs/ Drag one of the red squares to the big box and drop it (it turns green to indicate its dropped). You cant drop any of the others to this box while one is inside. Now drag that one out (It turns back red to indicate its removed). Now you can drop any of the others in its place.

The crux of this is as I described in my comment below; when you drop an item in a container associate the container with the item:

drop: function(event,ui){
    ui.draggable.addClass( 'dropped' ); // taken from your code & I used to change color

   ui.draggable.data('droppedin',$(this)); // associate the container
    $(this).droppable('disable'); // disable the droppable
}

Then when you drag it again, unassociate and re-enable:

drag: function(event,ui){
       if($(this).data('droppedin')){
           $(this).data('droppedin').droppable('enable'); v// re-enable
           $(this).data('droppedin',null);  // de-associate
           $(this).removeClass( 'dropped' ) // remove class
       }
   }

这篇关于如果div已经被删除，禁用drop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！