How to use the jquery ui draggable method on an ca

Question

I'm trying to allow the user the ability to move a rectangle around a canvas element using the draggable method.

This was my original thought but it doesn't work.

I have a fiddle set up at http://jsfiddle.net/r2Zbe/

$("button").click(function () {
    var door = bgContext.strokeRect(20, 20, 50, 150);
    door.draggable();
});

Answer 1

I would use something like fabricJs, it is much cleaner and easy to use.

Answer 2

jCanvas library says they can let you drag on canvas with jQuery. http://calebevans.me/projects/jcanvas/

They say nothing about jQuery UI though.

Disclaimer: I've never tried it.

Answer 3

Not sure about using jQuery UI with canvas, but if you are working with canvas you may want to take a look at EaselJS. It makes everything, including drag and drop, very simple.

EaselJS