html body / div / everythingからのドラッグ

Question

iこのように要素のクラスをドラッグ可能にします

jQuery(".drag").draggable();

jQuery(".drop").droppable({
accept: ".drag",

drop: function(ev, ui) {
//do stuff with dropped data

    }
});

問題は、要素をボディからドラッグして、HTML全体にドラッグできるようになったことです。ドラッグ可能な領域をどのように制限しますか？

Answer 1

http://docs.jquery.com/UI/Draggable#option-containment

指定された要素または領域の境界内へのドラッグを制限します。可能な文字列値：「parent」、「document」、「window」、[x1、y1、x2、y2]。

例：

包含オプションを指定してドラッグ可能を初期化します。

$('.selector').draggable({ containment: 'parent' });

または問題がある場合は、ドラッグ可能なオブジェクトを場所全体に配置できることです：

http://docs.jquery.com/UI/Draggable#option-revert

trueに設定されている場合、要素はドラッグを停止すると開始位置に戻ります。可能な文字列値：「有効」、「無効」。無効に設定すると、ドラッグ可能がドロップ可能にドロップされていない場合にのみ元に戻ります。有効なのは、その逆です。

そして最後に、ドラッグ可能な（編集：上記のものが必要です）：

http://docs.jquery.com/UI/Draggable#option-scope

ドロップ可能の受け入れオプションに加えて、ドラッグ可能およびドロップ可能なアイテムのセットをグループ化するために使用されます。ドロップ可能なオブジェクトと同じスコープ値を持つドラッグ可能なオブジェクトは、ドロップ可能なオブジェクトによって受け入れられます。

例：

スコープオプションを指定してドラッグ可能を初期化します。

$('.selector').draggable({ scope: 'tasks' });