jquery - 親divでドラッグアンドドロップ

Question

親 div Eg で検索ボックスをドラッグする必要があります。

親 div 子 div

親divで子divをドラッグする必要があります

リンクまたは回答を提案してください

Answer 1

jQuery UI Draggableは、必要なものを備えています。したがって、基本的には、親.parentとドラッグ可能な子が必要.childです。

<div class="parent">
    <div class="child">Drag Me!</div>
</div>

次に、スクリプトを呼び出し、containment: "parent"その親内に含めるようにします。

$(function() {
    $( ".child" ).draggable({ containment: "parent" });
});

動きを見るために、いくつかの境界線と高さを追加できます。

.parent {width: 200px; height: 200px; border: 1px solid #999;}
.child {width: 50px; height: 50px; border: 1px solid #ccc;}

フィドル: http://jsfiddle.net/praveenscience/B2akk/

---

HTML の場合、親は#parentで、ドラッグ可能な子は#searchです。

<div id="parent">
    <div id="search"> </div>
</div>

同じための jQuery コードは次のようになります。

$(function() {
    $( "#search" ).draggable({ containment: "#parent" });
});

フィドル: http://jsfiddle.net/praveenscience/ds4pv/