jQuery Draggable和Droppable防止其他拖動時的ondrop事件

我有3個可拖動的藍色div和1個可拖動的紅色div。當我將藍色的div拖放到紅色的div上時，我想要觸發拖放事件，同時它所需的位置是「空閒」的，此區域中沒有其他紅色div。屏幕會更好來形容它：jQuery Draggable和Droppable防止其他拖動時的ondrop事件

觸發降：triggered

不觸發降：not-triggered

我不知道如何去實現這一目標。

我的代碼：

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

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

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    \t <head> 
 
    \t \t <title>Bootstrap Example</title> 
 
    \t \t <meta charset="utf-8"> 
 
    \t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    \t \t <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    \t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    \t \t <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> 
 
     
 
    
 
    \t </head> 
 
    \t <body> 
 
    \t \t <div class="container"> 
 
    \t \t \t <div class="row"> 
 
    \t \t \t \t <div class="col-md-10 col-md-offset-2"> 
 
    \t \t \t \t \t <div class="draggable"></div> 
 
    \t \t \t \t \t <div class="draggable"></div> 
 
    \t \t \t \t \t <div class="draggable"></div> 
 
    \t \t \t \t \t <div id="droppable"></div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

來源

2017-08-31 Mark

當我dorped藍格在紅其生產下降時，你要 –

還有什麼我想，以防止產生下降事件時的指針是另一個藍色DIV。 I.E.我放下1個藍色的div，然後我想放下另一個，我希望它只能在紅色div的「空閒」空間中使用。 – Mark

你可以使用一個變量來存儲是否是免費的下降，而當你在對方拖動藍色的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

來源

2017-08-31 09:23:12

jQuery Draggable和Droppable防止其他拖動時的ondrop事件

回答

相關問題