EventListener(
      "mousedown",
      event => event.preventDefault(),
      { once: true }
    );

    this.props.onStart && this.props.onStart();
  }

  onDoubleClick() {
    if (this.props.onDoubleClick) {
      this.props.onDoubleClick();
    }
  }

  onMove(ev) {
    if (!this.isDragging) {
      return;
    }

    ev.preventDefault();
    // Use viewport coordinates so, moving mouse over iframes
    // doesn't mangle (relative) coordinates.
    this.props.onMove(ev.clientX, ev.clientY);
  }

  stopDragging() {
    if (!this.isDragging) {
      return;
    }
    this.isDragging = false;
    this.draggableEl.current.removeEventListener("mousemove", this.onMove);
    this.draggableEl.current.addEventListener(
      "mouseup",
      event => event.preventDefault(),
      { once: true }
    );
    this.props.onStop && this.props.onStop();
  }

  render() {
    return dom.div({
      ref: this.draggableEl,
      role: "presentation",
      style: this.props.style,
      title: this.props.title,
      className: this.props.className,
      onPointerDown: this.startDragging,
      onPointerUp: this.stopDragging,
      onDoubleClick: this.onDoubleClick,
    });
  }
}

module.exports = Draggable;
PK