svg.draggable.js
/
manual-test.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>svg.js</title>
    <style type="text/css">
      html,
      body,
      #drawing {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <div id="drawing"></div>

    <script src="https://unpkg.com/@svgdotjs/svg.js"></script>
    <script src="dist/svg.draggable.js"></script>

    <script>
      var e,
        constrainingShape,
        ghostShape,
        draw = SVG()
          .addTo('#drawing')
          .size('100%', '400')
          .attr({ 'font-size': 10 })
          .fill('#f06')

      /* plain draggable */
      draw
        .rect(100, 100)
        .center(150, 150)
        .draggable()

      draw.plain('just plain draggable').center(150, 210)

      /* grouped draggable */
      var g = draw.group().draggable()
      g.rect(100, 100).center(400, 150)
      g.plain('grouped draggable').center(400, 210)

      /* constrained with object */
      constrainedWithObject = draw
        .rect(100, 100)
        .center(650, 150)
        .draggable()
        .on('dragstart', function () {
          ghostShape = draw.put(constrainedWithObject.clone().opacity(0.2))

          constrainingShape = draw
            .rect(400, 350)
            .move(400, 50)
            .fill('none')
            .stroke('#0fa')
        })
        .on('dragmove', e => {
          e.preventDefault()

          const { handler, box } = e.detail
          let { x, y } = box

          const constraints = constrainingShape.bbox()

          if (x < constraints.x) {
            x = constraints.x
          }

          if (y < constraints.y) {
            y = constraints.y
          }

          if (box.x2 > constraints.x2) {
            x = constraints.x2 - box.w
          }

          if (box.y2 > constraints.y2) {
            y = constraints.y2 - box.h
          }

          handler.move(x, y)
          ghostShape.animate(300, '>').move(x, y)
        })
        .on('dragend', function () {
          constrainingShape.remove()
          ghostShape.remove()
        })
      draw.plain('constrained with object and ghost').center(650, 210)

      /* constraind with function */
      // Some constraints (x, y, width, height)
      const constraints = new SVG.Box(750, 0, 300, 300)

      draw
        .rect(100, 100)
        .center(900, 150)
        .draggable()
        .on('dragmove', e => {
          const { handler, box } = e.detail
          e.preventDefault()

          let { x, y } = box

          // In case your dragged element is a nested element,
          // you are better off using the rbox() instead of bbox()

          if (x < constraints.x) {
            x = constraints.x
          }

          if (y < constraints.y) {
            y = constraints.y
          }

          if (box.x2 > constraints.x2) {
            x = constraints.x2 - box.w
          }

          if (box.y2 > constraints.y2) {
            y = constraints.y2 - box.h
          }

          handler.move(x, y)
        })

      draw.plain('constraint with function').center(900, 210)

      /* group with multiple levels of draggables (dragging a part doesn't drag the group) */
      var g2 = draw.group().draggable()
      for (var i = 0; i < 4; i++) {
        var cx = i & 1 ? -25 : 25
        var cy = i & 2 ? -25 : 25
        g2.rect(50, 50)
          .center(cx, cy)
          .draggable()
      }
      g2.plain('grouped with multiple levels of draggable').center(0, 70)
      g2.move(1150, 150)
    </script>
  </body>
</html>