jqueryhtmlcanvasdrag-and-drop

Drag and Drop Application with jQuery

I'm new to jQuery. I want to create a drag and drop in which I can drop my five canvas in a particular div(dropzone), and I need some particular function:

  1. Create a clone of my canvas when I drag him (like JavaScript copymove) and drop that clone in dropzone, not the original (the original canvas It is always present in his location and must be draggable infinity times)

  2. After put the canvas in the dropzone, the possibility of delete that with a click on him and use a particular keyboard key (like "canc")

  3. the Drop operations must be accepted only in my particular div

  4. when I put a canvas in the dropzone, the place taken by the canvas will no longer a dropzone (a new canvas cannot place over the old canvas).

I'm starting with this js file:

$( dragdrop );

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

}

My 5 Canvas:

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

My div (dropzone):

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

  • Take a look to the jQueryUI modules "Droppable" and "Draggable" as shown here: