HTML5 Canvas Complex Drag and Drop Bounds Tutorial with KineticJS

To bound the movement of nodes being dragged and dropped inside regions with KineticJS, we can use the dragBoundFunc property to define boundaries that the node cannot cross.

Instructions: Drag and drop the the light blue rectangle and observe that it is bound below an imaginary boundary at y = 50. Drag and drop the yellow rectangle and observe that it is bound inside of an imaginary circle.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <body>
      <div id="container"></div>
      <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
      <script defer="defer">
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

// bound below y=50
        var blueGroup = new Kinetic.Group({
          x: 100,
          y: 70,
          draggable: true,
          dragBoundFunc: function(pos) {
            var newY = pos.y < 50 ? 50 : pos.y;
            return {
              x: pos.x,
              y: newY
            };
          }
        });

// bound inside a circle
        var yellowGroup = new Kinetic.Group({
          x: stage.getWidth() / 2,
          y: 70,
          draggable: true,
          dragBoundFunc: function(pos) {
            var x = stage.getWidth() / 2;
            var y = 70;
            var radius = 50;
            var scale = radius / Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));
            if(scale < 1)
              return {
                y: Math.round((pos.y - y) * scale + y),
                x: Math.round((pos.x - x) * scale + x)
              };
            else
              return pos;
          }
        });

var blueText = new Kinetic.Text({
          fontSize: 26,
          fontFamily: 'Calibri',
          text: 'bound below',
          fill: 'black',
          padding: 10
        });

var blueRect = new Kinetic.Rect({
          width: blueText.getWidth(),
          height: blueText.getHeight(),
          fill: '#aaf',
          stroke: 'black',
          strokeWidth: 4
        });

var yellowText = new Kinetic.Text({
          fontSize: 26,
          fontFamily: 'Calibri',
          text: 'bound in circle',
          fill: 'black',
          padding: 10
        });

var yellowRect = new Kinetic.Rect({
          width: yellowText.getWidth(),
          height: yellowText.getHeight(),
          fill: 'yellow',
          stroke: 'black',
          strokeWidth: 4
        });

blueGroup.add(blueRect).add(blueText);
        yellowGroup.add(yellowRect).add(yellowText);

layer.add(blueGroup);
        layer.add(yellowGroup);
        stage.add(layer);

</script>
  </head>
  </body>
</html>

< Simple Drag Bounds Groups >

More Examples

Modified on April 9th, 2013 by Eric Rowell