Question

I have two HTML div elements, one source one destiny; inside of each one there are canvas elements. I want to be able to drag and drop one of these canvases from the source div into the destiny div using jQuery UI.

The problem is that once a canvas is dropped, its new position inside the destiny div is not as expected and I have not been able to correct this.

Here is the code I am working on: http://jsfiddle.net/Mf6zJ/1/

Any ideas on how to correct this?

Thanks

Answer 1

Jquery droppable is just working fine. drop event handler is able to append the canvas to the destiny. Since, the draggable adds some styles to the canvas, canvas looks like its going outside of the destiny div.

Here, one way to solve this quick & easy.

$("#destiny").droppable({
    accept: "#source > canvas",
    drop: function(event, ui) {
        ui.draggable.appendTo($(this)).removeAttr('style');
    }
});

Here is the fiddle.