Jquery Draggablesを複製する

Question

複製可能でドラッグ可能なアイテムにドラッグできるドラッガルアイテムを作成しようとしています。さて、ちょっとした努力をして、その作業を行って、結果として重複してドラッグ可能にしました。しかし、「ドロップ」メソッドは、新しいクローンを複数回ドラッグすると、それ自体クローンを作成するようにしています。なぜそれがそれをやっているのか分かりますが、私はそれをやめる方法があまり分かりません。ドロップ可能なボックスの外にあるアイテムだけが複製可能である必要があります。箱の中に入ると、重複している部分も移動することができますが、複製はできません。

Example

は（これまでのところ、とても良い。）、その後、問題を確認するために数回をドラッグして、ボックス内にドロップボックスに余りハリネズミをドラッグしてみてください。

$(function() { 
    $("#draggable1").draggable({ helper: 'clone', revert: "invalid" }); 
    $("#panel1").droppable({ 
     drop: function(event, ui) { 
      $(this).append($(ui.helper).clone().draggable()); 
     } 
    }); 
}); 

Answer 1

あなたは外に廃棄されるハリネズミ、およびドロップさ既にドロップハリネズミの1の間の差を検出するドロップ可能ための方法が必要です。こうすれば、dropコールバックはボックスの外からドロップされたヘッジホッグだけをクローンすることができます。

便利なことに、これを検出する方法はすでにあります。ボックス内の<img>にはIDがあり、ドロップされた<img>要素はボックス内にありません。だから、dropコールバック関数の中のドロップされた要素の "ソース"にアクセスする方法を理解するだけです。あなたはその要素のidいくつかの方法のいずれかでを得ることができるので、droppable docsあたりとして

、ui.draggableは「現在のドラッグ可能な要素、jQueryオブジェクト、」です。

$("#draggable1").draggable({ 
    helper: 'clone', 
    revert: "invalid" 
}); 

$("#panel1").droppable({ 
    drop: function(event, ui) { 
     if (ui.draggable[0].id) { 
      $(this).append($(ui.helper).clone().draggable()); 
     } 
    } 
}); 

デモ：http://jsfiddle.net/mattball/MJhcp/

---

ui.draggableが本格jQueryオブジェクトであるので、それはまたui.draggable[0].idの代わりに、次のいずれかを使用するように動作します。

ここで働く一つの方法です

• ui.draggable.get(0).id
• ui.draggable.attr('id')
• ui.draggable.prop('id')