jquery draggable/droppable

以下のお手伝いをいただければ幸いです。私はドロップ可能な箱の外に写真を持っている必要があります。ユーザーは写真をボックスにドラッグできなければならず、写真がボックスの中に入ったら、ユーザーはそれをドラッグすることができますが、ボックスの内側にしかドラッグできません。jquery draggable/droppable

ありがとうございます。

出典

2010-11-20 Rodrigo

これまでのコードを投稿できるのは、ドロップ可能なボックス内でドラッグするだけですか？その前半の支援をご希望の場合は、お知らせください。お手伝いします。しかし、コードの半分を投稿すれば、その後に含まれるdraggableをサポートするために必要なものを追加することができます。 [jsFiddle]（http://jsfiddle.net/）を使って私たちと共有することができます。ようこそ！ –

ありがとうございます。ここに私が修正した、ウェブからのドラッグ可能/ドロップ可能な例があります。 http://jsfiddle.net/sPdwm/ – Rodrigo

$（ "#draggable"）.draggable（{containment： "＃droppable"}）;を追加しました。ドロップして：機能と画像の動きを含めることができた、私はコードを更新し、うまくいくようです。 – Rodrigo

これは、ドロップ可能オブジェクトの "drop"コールバック内のドラッグ可能オブジェクトに "containment"オプションを追加することで実行できます。たとえば、次の項目は、実際には、ドロップコールバック火災を滴下し、生じされると、上記のオプションで

$(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
      $(this) 
       .addClass("ui-state-highlight") 
       .find("p") 
       .html("Dropped!"); 
      $("#draggable").draggable({containment:"#droppable"}); 
     } }); 
});

、ドラッグ可能な項目は「封じ込め」オプションの項目に制約されます。

出典

2011-01-12 22:16:00 jjross

答えて

関連する問題