ドラッグ可能なオブジェクトをドラッグ可能に変更する

Question

UIデザイナーのようなものを作成しようとしています。だから私は「ツールボックス」と「キャンバス」を持っています。ツールボックスのアイテムをドラッグ可能にすると、ドラッグすることができます。しかし私が必要とするのは、コピーをドラッグすることで、ツールアイテムの複数のインスタンスをキャンバスにドラッグすることができます。

$('.tool-box-item').draggable({ 
    helper : 'clone', 
    drag : function (event, ui){ 
     // jQuery does not allow object modification here 
    }, 
}); 

クローニングは唯一、とすぐにドラッグが完了すると、元の要素の移動をドラッグしている間に適用されるので、これは動作しません。ドラッグプロパティをオーバーライドしようとしましたが、ドラッグされた要素を変更できません。スタートでも同じだった。

注：ストップイベントは、ドラッグの開始時および終了後にコピーを作成したいので使用できません。私はキャンバスをドロップ可能なものとして定義してコピーを作成することもできましたが、ドラッグを開始したときにコピーを作成したいのです。

私はカスタムドラッグ機能を作成する必要があると思いますが、jQueryに他の方法があると思っていました。

ここにはjsfiddleがありますが、ドラッグの後ではなく開始時に要素をクローンしたいと思います。

EDIT：宛先はサードパーティコントロールです。これは、ドロップイベント（スタッキングと整列）のための独自の実装を持っています。私が最後にクローンを作成した場合は、その実装を変更する必要があります。

Answer 1

ドラッグのために元の要素を使用しようと、「dragendイベント」イベントを保つために、そしてあなたの "ツールボックス"の場所に複製してください。 here

Answer 2

jqueryのclone（https://api.jquery.com/clone/）メソッドを使用すると、ドラッグ可能な要素を削除した後に複製することができます。このようなものはあなたのニーズを満たすでしょうか？

$(function() { 
    makeDraggable($("#draggable")); 
}); 

function makeDraggable(element) { 
    $(element).attr('style', 'position:absolute').draggable({ 
     start: function() { 
      makeDraggable($('#draggable').clone().attr('style', '').appendTo('body')); 
     } 
    }); 
} 

ここで少し荒いが、そのはjsbinです：https://jsbin.com/tasodixoka/edit?html,output

編集：私はあなたのフィドルを更新：https://jsfiddle.net/z9rrL6po/6/