jqueryドラッグ・アンド・ドロップの質問

Question

要素がコンテナからドラッグされたかどうかを検出したいのですが、例えば

：

<div id="container"> 
    <img src="xxx.png" /> 
</div> 

私はdiv要素のうち、そのimg要素をドラッグしています。私は のimg要素を削除しますが、imgがdivから外れているときを検出する方法はわかりません。

私はjqueryドラッグアンドドロップライブラリを使用しています。あなたは、コンテナ

<div id="droppableDiv"> 
    <div id="container"> 
     <img src="xxx.png" /> 
    </div> 
</div> 

の外のdivを追加し、同様の機能を追加することによって、それがドロップ可能にする必要があり

Answer 1

これを行う簡単な方法があります。

1. セット子供は
2. がドラッグ停止の真の
3. 子が出てドラッグされた要素
4. 設定解除ドロップ機能の両親でこのフラグを削除した場合にフラグを設定するドロップ可能なために
5. セット親をドラッグ可能にします親の==子供が親に落とされていない

だから、あなたは親の中で子供を動かすと何も起こらない（removeMeフラグは設定されていない）元の位置に戻る。

親の外部に子をドラッグすると、removeMeフラグは設定されず、ドラッグ停止メソッドによって子が削除されます。

javascriptの

$("#draggable").draggable({ 
    start: function(event, ui) { 
    // flag to indicate that we want to remove element on drag stop 
    ui.helper.removeMe = true; 
    }, 
    stop: function(event, ui) { 
    // remove draggable if flag is still true 
    // which means it wasn't unset on drop into parent 
    // so dragging stopped outside of parent 
    if (ui.helper.removeMe) { 
     ui.helper.remove(); 
    } 
    }, 
    // move back if dropped into a droppable 
    revert: 'valid' 
}); 

$("#droppable").droppable({ 
    drop: function(event, ui) { 
    // unset removeMe flag as child is still inside parent 
    ui.helper.removeMe = false; 
    } 
}); 

HTML

<div id="droppable"> 
    <p id="draggable">Drag me!</p> 
</div> 

Answer 2

：

$("#droppableDiv").droppable ({ 
    drop: function() { alert('dropped'); } 
}); 

代わりに、アラートの（「ドロップ」）; img要素をコンテナdivから削除する少しのコードを追加することができます。

hereは、他の何かをしますが、ドロップ可能でドラッグ可能なオブジェクトを使用する例です。おそらくそれがどのように動作するかを理解するのに役立ちます！

希望は、これは

-Fortes

Answer 3

はあなたのソリューションを提供して感謝することができます。

私はこの問題のために外部divを必要とせずに他の解決策を見つけました。

マウスを移動した時間を検出するために「距離」オプションを使用しています。その後、 「停止」オプションを使用して要素を削除してください。

$(".droppable").droppable({ 
    drop: function(event, ui) { 
     var obj = $(ui.draggable).clone(); 
     obj.draggable({ 
        distance: 100,//used to measure how far my mouse moved. 
        helper: 'clone', 
        opacity : 0.35, 
         stop: function(event, ui) { 
          $(this).remove();//remove this element. 
         } 

         } 

     );//obj.draggable 
    }//drop 
})