function reactToDrag(element, onDrag, beforeDrag) {
  let xStart, yStart
  let startDrag = (event) => {
    // Avoid the default events
    event.preventDefault()

    // Store the position where the drag started
    xStart = event.pageX
    yStart = event.pageY

    // Fire the start drag event
    if (beforeDrag) {
      var { x, y } = parent.point(event.pageX, event.pageY)
      beforeDrag(event, x, y)
    }

    // Register events to react to dragging and drag ends
    SVG.on(window, ['mousemove.drag', 'touchmove.drag'], reactDrag)
    SVG.on(window, ['mouseup.drag', 'touchend.drag'], stopDrag)
  }

  let reactDrag = (event) => {
    // Convert screen coordinates to svg coordinates and use them
    var { x, y } = parent.point(event.pageX, event.pageY)
    if (onDrag) onDrag(event, x, y)
  }

  let stopDrag = (event) => {
    SVG.off(window, ['mousemove.drag', 'touchmove.drag'])
    SVG.off(window, ['mouseup.drag', 'touchend.drag'])
  }

  // Bind the drag tracker to this element directly
  let parent = element.root()
  let point = new SVG.Point()
  element.mousedown(startDrag).touchstart(startDrag)
}

SVG.extend(SVG.Element, {
  draggable: function (after) {
    let sx, sy

    reactToDrag(
      this,
      (e, x, y) => {
        this.transform({
          origin: [sx, sy],
          position: [x, y]
        })

        if (after) {
          after(this, x, y)
        }
      },
      (e, x, y) => {
        var toAbsolute = new SVG.Matrix(this).inverse()
        var p = new SVG.Point(x, y).transform(toAbsolute)
        sx = p.x
        sy = p.y
      }
    )
    return this
  }
})