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事件

回答

相关问题