使用jquery拖放應用程序

Question

Hello guys我是jquery的新手。我想創建一個拖放，以便我可以將我的五個畫布放在特定的div（dropzone）中，並且我需要一些特定的功能：

1）：創建一個克隆，當我拖動畫布時2）：放置在dropzone的畫布後，刪除的可能性（原始畫布它始終存在於他的位置，並且必須拖動infiniy倍）

2）通過點擊他並使用特定的鍵盤鍵（如「canc」）

3）：只能在我的特定div中接受拖放操作

4）：當我在dropzone中放置一個畫布時，畫布所佔的位置將不再是一個dropzone（新畫布不能放置在舊畫布上）。

我開始用這個js文件：

$(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

取看看jQueryUI模塊「Droppable」和「可拖動」如下所示：

• https://jqueryui.com/droppable/