Question

我有3个可拖动的蓝色div和1个可放置的红色div。当我将蓝色div拖到红色上时，我想触发掉落事件，同时它所需的位置是＆＃34; free＆＃34;，此区域没有其他红色div。屏幕将更好地描述它：

下拉时触发：triggered

不会在丢弃时触发：not-triggered

我不知道如何实现这一目标。

我的代码：

＆＃13;

	$(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");
    		}
    	});
    });

＆＃13;

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

＆＃13;

 <!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>

＆＃13;

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

1 个答案: