jQuery Draggable 和 droppable 在其他 draggable 上阻止 ondrop 事件

Question

我有 3 个可拖动的蓝色 div 和 1 个可拖放的红色 div。我想在拖拽蓝色 div 到红色的时候触发 drop 事件，同时拖放的位置是 "free"，这个区域没有其他红色 div。屏幕会更好地描述它：

掉落时触发：triggered

掉落时未触发：not-triggered

我不知道如何实现。

我的代码：

 $(document).ready(function(){
     $(".draggable").draggable({
      drag: function(event,ui){
         $(this).css("opacity", .5)
      }
     });
     $('#droppable').droppable({
      accept: ".draggable",
      tolerance:  'pointer',
      drop: function(event,ui){
      alert("dropped");
      }
     });
    });

  div {
      margin: 5px;
     }
    .draggable {
      width:100px;
      height: 100px;
      background-color: blue;
    }
    #droppable {
       width: 400px;
       height: 400px;
       background-color: red;
    }

 <!DOCTYPE html>
    <html lang="en">
     <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
        
    
     </head>
     <body>
      <div class="container">
       <div class="row">
        <div class="col-md-10 col-md-offset-2">
         <div class="draggable"></div>
         <div class="draggable"></div>
         <div class="draggable"></div>
         <div id="droppable"></div>
        </div>
       </div>
      </div> 
     </body>
    </html>

Answer 1

你可以用一个变量来存储是否可以自由拖放，当你把蓝色的div相互拖动时改变这个变量。

    $(document).ready(function(){
    var isFreeToDrop = true;

    $(".draggable").draggable({
        drag: function(event,ui){
                 $(this).css("opacity", .5)
        }
    });

        $(".draggable").droppable({
          tolerance: 'touch',
        over: function(event,ui){
          isFreeToDrop = false;
        },
        out: function(event,ui){
          isFreeToDrop = true;
        },

    });

    $('#droppable').droppable({
        accept: ".draggable",
        tolerance:  'pointer',
        drop: function(event,ui){
          if( isFreeToDrop ){
               alert("dropped");
          }

        }
    });
});

这是 JSBin 上的工作版本：https://jsbin.com/donusajoba/edit?html,css,js,output

jQuery Draggable 和 droppable 在其他 draggable 上阻止 ondrop 事件

jQuery Draggable and droppable prevent ondrop event when on other draggable

jquery

jquery-ui-draggable

jquery-ui-droppable