JQuery UI - 複数のdivに一致するセレクタに包含を適用するにはどうすればよいですか？

Question

例：

<div> 
    <div class='drop'> 
     <div class='drag'></div> 
    </div> 
    <div class='drop'> 
    </div> 
    <div class='drop'> 
    </div> 
    <div class='drop'> 
    </div> 
    <div> 
    </div> 
</div> 

$('div.drag').draggable({ containment: 'div.drop' }); 

通常、1つだけ "div.drop" の要素がある場合は意図したとおり、それは動作します。上記の例のように1より大きい値がある場合、div.drop divのいずれかにドラッグ/ドロップされると考えました。結果として、 "div.drop"セレクタにマッチした最初の要素にのみドラッグ/ドロップ可能です。

これには回避策がありますか（つまり、div.drop divでのみ/ droppable/draggableにしてください）。

編集：あなたは正しい人だと思います。いくつかのイントロスペクションの後、divsの間にパディングがあり、paddedエリアにdiv.drag divをドロップしたくないので、私があなたの提案したソリューションには向かないことに気付きました。

Answer 1

このようには機能しません。 包含は、ドラッグの制約境界です。

ドラッグアンドドロップします。
そして、あなたはdiv.gragのドラッグを設定する必要があります。

$('div.drag').draggable(); 

そしてdiv.dropのドロップを設定：

$('div.drop').droppable(); 

あなたはあなたの最初のdivレベルを使用して、ドラッグ要素のための封じ込めを追加することができます。

<div id='dragZone'> 
    <div class='drop'> 
     <div class='drag'></div> 
    </div> 
    <div class='drop'> 
    </div> 
</div> 


$('div.drag').draggable({ containment: '#dragZone'}); 

Answer 2

containmentは、指定された要素の境界内でドラッグ可能なオブジェクトの移動を制限します。あなたはdiv.dropの親にcontainmentを設定することができます。

あなたは、div.dropのドロップ可能を作るドロップでドラッグを追加し、ドラッグ可能戻しますように、みんなが封じ込めを指摘したように、それがドロップ可能

$('div.drop').droppable({drop: function(e, ui) { 
    ui.draggable.appendTo(this); 
}}); 
$('div.drag').draggable({ 
    helper: 'clone', 
    revert: 'invalid' 
}); 

Answer 3

に落ちていない場合はrevert: 'invalid'オプションを使用する必要がありますselectorはそのようには機能しません指定された要素または領域の境界内にドラッグする制約があります。

あなたは、以下のような何かを試みることができる：

jQueryのリファレンス：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

HTML：

<div id="dragContainer">  
<div class='drop'> 
    <div class='drag'>drag</div>  
</div>  
<div class='drop'>drop 
</div>  
<div class='drop'>drop 
</div>  
<div class='drop'>drop 
</div>  
<div class='nodrop'> 
</div> 
</div> 

はJQuery：

<script type="text/javascript"> 
$('div.drag').draggable({ containment: '#dragContainer', revert: "invalid" }); 

    $('div.drop').droppable({ 
    drop: handleDropEvent 
    }); 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    alert('Ok to drop here onto me!'); 
} 
</script> 

Answer 4

私のコードを試しください

<style> 
.container { 
    border: 2px solid #000; 
} 
.container img { 
    width: 45px; 
    height: 45px; 
} 
.draggable { 
    width: 40px; 
    height: 40px; 
    background: #F90; 
    border-radius: 10px; 
    margin: 0 0 0 0; 
    float: top; 
} 
.draggable.is-pointer-down { 
    background: #09F; 
    z-index: 2; /* above other draggies */ 
} 
.draggable.is-dragging { opacity: 0.7; } 
</style> 
    <script> 
$(document).ready(function() { 
    var $draggables = $('.draggable').draggabilly({ 
    // contain to parent element 
        **containment: "#box"** 
    }); 
}); 
</script> 

こんにちは。私はこれがあなたを助けるかもしれないと思う:)

<div class="container" id="box"> 

と私の画像はこのdivの中にあります。