html - Drag objects in canvas

Question

Im looking for an easy to use method of assigning drag behavior to multiple objects (images, shapes etc) in canvas. Does anyone have a good way or know of any libraries for dragging objects around? Thanks

Answer 1

Creating your own mouse events takes a little work - ideally you should either create or use some kind of mini-library. I'm thinking of creating something like this in the near future. Anyway, I created a drag and drop demo on jsFiddle showing how to drag images - you can view it here.

You can create draggable images like this:

var myImage = new DragImage(sourcePath, x, y);

Let me know if you have any questions about this. Hope it helps.

EDIT

There was a bug when dragging multiple images. Here is a new version.

Another thing you might want to check out is easeljs it sort of in the style of AS3... mouseEvents dragging etc...