HTML5 Canvas Drag and Drop a Line with KineticJS

To drag and drop a line with KineticJS, we can set the draggable property of the config object to true when the line is instantiated, or we can use the setDraggable() method.

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.2.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

var layer = new Kinetic.Layer();

// complex dashed and dotted line
      var blueLine = new Kinetic.Line({
        y: 50,
        points: [73, 70, 340, 23, 450, 60, 500, 20],
        stroke: 'blue',
        strokeWidth: 10,
        lineCap: 'round',
        lineJoin: 'round',
        /*
         * line segments with a length of 29px with a gap
         * of 20px followed by a line segment of 0.001px (a dot)
         * followed by a gap of 20px
         */
        dashArray: [29, 20, 0.001, 20],
        draggable: true
      });

layer.add(blueLine);
      stage.add(layer);
    </script>
  </body>
</html>

< Drag a Group Drag the Stage >

More Examples

Modified on April 9th, 2013 by Eric Rowell