HTML5 Canvas Drag and Drop Events Tutorial

To detect drag and drop events with KineticJS, we can use the on() method to bind dragstart, dragmove, or dragend events to a node. The on() method requires an event type and a function to be executed when the event occurs.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      function writeMessage(messageLayer, message) {
        var context = messageLayer.getContext();
        messageLayer.clear();
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var boxLayer = new Kinetic.Layer();
      var messageLayer = new Kinetic.Layer();
      var rectX = stage.getWidth() / 2 - 50;
      var rectY = stage.getHeight() / 2 - 25;

var box = new Kinetic.Rect({
        x: rectX,
        y: rectY,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
      });

// write out drag and drop events
      box.on('dragstart', function() {
        writeMessage(messageLayer, 'dragstart');
      });
      box.on('dragend', function() {
        writeMessage(messageLayer, 'dragend');
      });

boxLayer.add(box);

stage.add(messageLayer);
      stage.add(boxLayer);
    </script>
  </body>
</html>

< Drag the Stage Simple Drag Bounds >

More Examples

Modified on April 9th, 2013 by Eric Rowell