How to use the jquery ui draggable method on an canvas object?

问题

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();
});

回答1:

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

回答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.

回答3:

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

来源：https://stackoverflow.com/questions/15767872/how-to-use-the-jquery-ui-draggable-method-on-an-canvas-object