HTML5 Canvas Simple Drag Bounds Tutorial with KineticJS

To restrict the movement of shapes being dragged and dropped with KineticJS, we can use the dragBoundsFunc property which is a user defined function that overrides the drag and drop position. This function can be used to constrain the drag and drop movement in all kinds of ways, such as constraining the motion horizontally, vertically, diagonally, or radially, or even constrain the node to stay inside of a box, circle, or any other path.

Instructions: Drag and drop the the horizontal text and observe that it can only move horizontally. Drag and drop the vertical text and observe that it can only move vertically.

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://www.html5canvastutorials.com/libraries/kinetic-v4.5.2-beta.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var rectHeight = 50;
      var rectWidth = 100;
      var rectY = (stage.getHeight() - rectHeight) / 2;

var hbox = new Kinetic.Text({
        x: 120,
        y: 70,
        fontSize: 24,
        fontFamily: 'Calibri',
        text: 'horizontal',
        fill: 'black',
        padding: 15,
        draggable: true,
        dragBoundFunc: function(pos) {
          return {
            x: pos.x,
            y: this.getAbsolutePosition().y
          }
        }
      });

var vbox = new Kinetic.Text({
        x: 350,
        y: 70,
        draggable: true,
        fontSize: 24,
        fontFamily: 'Calibri',
        text: 'vertical',
        fill: 'black',
        padding: 15,
        draggable: true,
        dragBoundFunc: function(pos) {
          return {
            x: this.getAbsolutePosition().x,
            y: pos.y
          }
        }
      });

layer.add(hbox);
      layer.add(vbox);
      stage.add(layer);

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

< Drag Events Complex Drag Bounds >

More Examples

No Related Post

Modified on April 9th, 2013 by Eric Rowell