0
私は3つのドラッグ可能な青いdivと1つのドロップ可能な赤いdivを持っています。青いdivを赤い部分にドラッグするとドロップイベントでトリガーしたいと同時に、それが取る場所は「フリー」で、この領域には他の赤いdivはありません。画面はそれを記述する方がよいでしょう：ドロップにトリガされませんtriggeredjQueryドラッグ可能でドロッブル可能な他のドラッグ可能なオントリックイベントを防止する
：ドロップでトリガ
私はそれを達成するためにどのようなアイデアを持っていません。
マイコード：
\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>
は、あなたが –
をしたい他に何私はポインタが別の青色の上にあるときにドロップイベントを生成するようにしたい：ここ
はJSBin上の作業バージョンですdiv。 I.私は1つの青いdivを落とし、別のものを落としたい、私はそれが赤いdivの "自由な"スペースでのみ可能であることを望む。 – Mark