https://github.com/sigvef/canvas-dragdrop.js

Lightweight dragdrop framework for arbitrary HTML5 canvas elements
https://github.com/sigvef/canvas-dragdrop.js

Last synced: 1 day ago
JSON representation

Lightweight dragdrop framework for arbitrary HTML5 canvas elements

• Host: GitHub
• URL: https://github.com/sigvef/canvas-dragdrop.js
• Owner: sigvef
• Created: 2012-08-07T23:15:15.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2012-12-15T18:14:17.000Z (almost 12 years ago)
• Last Synced: 2024-10-11T20:43:18.092Z (27 days ago)
• Language: JavaScript
• Homepage:
• Size: 129 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
canvas-dragdrop.js

==================

Make any object on a HTML5 canvas draggable/droppable. Objects must have a property "position", which must be an object containing at least the keys "x" and "y", holding the position of the object. Objects must also have a property "size", which must be an object containing at least the keys "w" and "h" holding the width and height of the object. Position will be altered by canvas-dragdrop, size will not be.

Example usage:

    /** set up some objects **/

    var an_object = {

                        position:{x:10,y:20},

                        size:{w:10,h:20},

                        /* .. other variables and stuff */

                    };

    var other_object =  {

                            position:{x:10,y:20},

                            size:{w:10,h:20},

                            /* .. other variables and stuff */

                        };

    /** set up the CanvasDragDrop module, and hook up callbacks **/

    /* canvas is a DOM reference to a html5 canvas */

    var cdd = new CanvasDragDrop(canvas);

    cdd.makeDraggable(an_object,{

        /* all callbacks are optional */

        "dragstart":function(e){

            /* "this" is a reference to an_object in the callbacks */

        },

        "dragmove":function(e){

        },

        "dragend":function(e){

        }

    });

    cdd.makeDroppable(other_object,{

        "drop":function(e){

            /* "this" is a reference to other_object here */

        }

    });