Jqueryを使用したドラッグ＆ドロップアプリケーション

Question

こんにちは、私はjqueryを初めて使っています。私は特定のdiv（dropzone）に私の5つのキャンバスをドロップすることができますドラッグ＆ドロップを作成したい、私はいくつかの特定の関数が必要です：

1）：ドラッグすると私のキャンバスのクローンを作成する元のキャンバスではなく元のキャンバスにドロップしてください）

2）：キャンバスをドロップゾーンに置いた後、削除の可能性があります彼にクリックし、特定のキーボードのキーを使用します（「CANC」のような）

3）であること：ドロップ操作だけ私の特定のdivの中に受け入れなければなりません

4）：私がdropzoneにキャンバスを置くと、そのキャンバスの場所はもはやdropzone（新しいキャンバスは古いキャンバス上に置くことができません）です。

$(dragdrop); 

function dragdrop() { 
    $('.note').draggable(); 
    $('#dropzone').droppable(); 

}

私の5枚のキャンバス：

<canvas id="nota1" class="note" 
width="10" height="20"> 
</canvas> 

<canvas id="nota2" class="note" 
width="20" height="20"> 
</canvas> 

<canvas id="nota3" class="note" 
width="40" height="20"> 
</canvas> 

<canvas id="nota4" class="note" 
width="80" height="20"> 
</canvas> 

<canvas id="nota5" class="note" 
width="160" height="20"> 
</canvas> 

マイDIV（ドロップゾーン）：

<div id="dropzone" width="800" height="800" 
</div> 

Answer 1

テイク私はこれで始めている

は、ファイルをJS jQueryUIモジュール "Droppable"と "ドラッグ可能」としてここに示されている：

• https://jqueryui.com/droppable/