How to use d3-drag - 10 common examples

}).then((y) => {
  const state = Y.PlainState(y.share.state)
  setDefaults(state, {
    piece1: {translation: {x: 0, y: 0}},
    piece2: {translation: {x: 0, y: 0}},
    piece3: {translation: {x: 0, y: 0}},
    piece4: {translation: {x: 0, y: 0}}
  })

  window.state = state
  var origin // mouse start position - translation of piece
  var drag = d3Drag()
    .on('start', function (params) {
      // get the translation of the element
      var translation = select(this).attr('transform').slice(10, -1).split(',').map(Number)
      // mouse coordinates
      var mouse = d3Mouse(this.parentNode)
      origin = {
        x: mouse[0] - translation[0],
        y: mouse[1] - translation[1]
      }
    })
    .on('drag', function () {
      var mouse = d3Mouse(this.parentNode)
      var x = mouse[0] - origin.x // =^= mouse - mouse at dragstart + translation at dragstart
      var y = mouse[1] - origin.y
      select(this).attr('transform', 'translate(' + x + ',' + y + ')')
    })

getGenericDrag (startFn, dragFn, endFn, undoFn, redoFn,
                              relativeToSelection) {
    // define some variables
    const behavior = d3Drag()
    const undoStack = this.undoStack
    const rel = relativeToSelection.node()
    let totalDisplacement

    behavior.on('start', d => {
      this.dragging = true

      // silence other listeners
      d3Selection.event.sourceEvent.stopPropagation()
      totalDisplacement = { x: 0, y: 0 }
      startFn(d)
    })

    behavior.on('drag', d => {
      // update data
      const displacement = {

function ended() {
      nopropagation();
      if (event.touches) {
        if (event.touches.length) return;
        if (touchending) clearTimeout(touchending);
        touchending = setTimeout(function() { touchending = null; }, 500); // Ghost clicks are delayed!
        group.on("touchmove.brush touchend.brush touchcancel.brush", null);
      } else {
        dragEnable(event.view, moving);
        view.on("keydown.brush keyup.brush mousemove.brush mouseup.brush", null);
      }
      group.attr("pointer-events", "all");
      overlay.attr("cursor", cursors.overlay);
      if (state.selection) selection = state.selection; // May be set by brush.move (on start)!
      if (empty(selection)) state.selection = null, redraw.call(that);
      emit.end();
    }

function ended() {
      nopropagation();
      if (event.touches) {
        if (event.touches.length) return;
        if (touchending) clearTimeout(touchending);
        touchending = setTimeout(function() { touchending = null; }, 500); // Ghost clicks are delayed!
        group.on("touchmove.brush touchend.brush touchcancel.brush", null);
      } else {
        dragEnable(event.view, moving);
        view.on("keydown.brush keyup.brush mousemove.brush mouseup.brush", null);
      }
      group.attr("pointer-events", "all");
      overlay.attr("cursor", cursors.overlay);
      if (state.selection) selection = state.selection; // May be set by brush.move (on start)!
      if (empty(selection)) state.selection = null, redraw.call(that);
      emit.end();
    }

initZoomBehaviour() {
		const $$ = this;
		const config = $$.config;
		const isRotated = config.axis_rotated;
		let start = 0;
		let end = 0;
		let zoomRect = null;

		const prop = {
			axis: isRotated ? "y" : "x",
			attr: isRotated ? "height" : "width",
			index: isRotated ? 1 : 0
		};

		$$.zoomBehaviour = d3Drag()
			.clickDistance(4)
			.on("start", function() {
				$$.setDragStatus(true);

				if (!zoomRect) {
					zoomRect = $$.main.append("rect")
						.attr("clip-path", $$.clipPath)
						.attr("class", CLASS.zoomBrush)
						.attr("width", isRotated ? $$.width : 0)
						.attr("height", isRotated ? 0 : $$.height);
				}

				start = d3Mouse(this)[prop.index];
				end = start;

				zoomRect

componentDidMount() {
		this.d3Node = select(this.nodeElement);
		this.d3Node.data([this.props.node.getPosition()]);
		this.d3Node.call(
			drag()
				.on('start', this.onDragStart)
				.on('drag', this.onDrag)
				.on('end', this.onDragEnd),
		);
	}

_onDragLine() {
    let isDragged = false;
    let lineDrag = drag()
      .on('drag', (d, i) => {
        this._dragging = true;
        if (!isDragged) {
          isDragged = true;
          this._geometry.insertNode(
            i + 1,
            this._projectionUtility.svgPointToLatLng([event.x, event.y]));
          this._updateLine();
          if (this._options.showSegmentLength) {
            this._updateSegmentText();
          }
          if (this._options.showAccumulativeLength) {
            this._updateNodeText();
          }
        }
        this._updateHoverCirclePosition(event.x, event.y);

_graphNodeDragConfig() {
        const customNodeDrag = d3Drag()
            .on("start", this._onDragStart)
            .on("drag", this._onDragMove)
            .on("end", this._onDragEnd);

        d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`)
            .selectAll(".node")
            .call(customNodeDrag);
    }

_onDragCircle() {
    let self = this;
    let isDragged = false;

    let circleDrag = drag()
      .on('drag', function (d, i) {
        isDragged = true;
        self._dragging = true;

        select(this)
          .attr('cx', event.x)
          .attr('cy', event.y);
        self._updateLinePosition.call(self, self._linesBase, i);
        self._updateLinePosition.call(self, self._linesAux, i);
        if (self._options.showSegmentLength) {
          self._updateSegmentTextPosition(i);
        }
        if (self._options.showAccumulativeLength) {
          self._updateNodeTextPosition(i);
        }
        self._updateArea(i, self._projectionUtility.svgPointToLatLng([event.x, event.y]));

let { components = [], handles = [] } = note
    components.forEach(c => {
      c.attrs.stroke = this.annotation.color
    })

    if (this.editMode) {
      handles = this.mapHandles([
        { x: 0, y: 0, drag: this.dragNote.bind(this) }
      ])
      components.push({ type: "handle", handles })

      const dragging = this.dragNote.bind(this),
        start = this.dragstarted.bind(this),
        end = this.dragended.bind(this)
      this.note.call(
        drag()
          .container(select("g.annotations").node())
          .on("start", d => start(d))
          .on("drag", d => dragging(d))
          .on("end", d => end(d))
      )
    } else {
      this.note.on("mousedown.drag", null)
    }
    return components
  }