Drag and Drop a Line

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

Konva Drag and Drop the Line Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Drag and Drop a Line Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();

      // complex dashed and dotted line
      var blueLine = new Konva.Line({
        y: 50,
        points: [10, 70, 40, 23, 150, 60, 250, 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
         */
        dash: [29, 20, 0.001, 20],
        draggable: true,
      });

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

Enjoying Konva? Please consider to support the project.