Search code examples
htmlcanvasdraggabledrag

Drag objects in canvas


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


Solution

  • 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...