Filippozzo Filippozzo - 6 months ago 39
jQuery Question

How to clone Canvas with Jquery in a Drag n Drop

I need to clone my Cavans every time i Drag him into the dropzone

My Canvas

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


My Div(Dropzone)

style is in my style.css

<div id="section"></div>


My Drag n Drop Function:

it is in a different js file

$( drag );

function drag() {
$('.lego.Nota').draggable({
revert: "invalid",
cursor: 'move'
});

$('#section').droppable();

}


It works properly, but when i terminate my drag operation the canvas moves from his original position, i need to move in the dropzone a clone of that and the original stay in position for another drag n drop operation.

How can i do this??

Answer

I don't think cloning your canvas every time for drag and drop is the proper approach to this. Look at easeljs for a really easy way to do what you are requesting. It gives access to the canvas very nicely through javascript.

This then allows for stuff like this:

//DRAG FUNCTIONALITY =====================
dragger.on("pressmove", function(evt){
     evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
     stage.update(); //much smoother because it refreshes the screen every pixel movement instead of the FPS set on the Ticker
     if(intersect(evt.currentTarget, destination)){
       evt.currentTarget.alpha=0.2;
       box.graphics.clear();
       box.graphics.setStrokeStyle(3)
       .beginStroke("#0066A4")
       .rect(0, 0, destHeight, destWidth);

     }else{
       evt.currentTarget.alpha=1;
       box.graphics.clear();     box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
     }

});
Comments