See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition: ElementPosition;
  // ポインタ-の動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });

    this.element.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x === null ||
        this.pointerStartPosition.y === null
      ) {
        return;
      }

      const pointerMovingDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovingDistanceY = event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovingDistanceX, pointerMovingDistanceY);
    });

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });

    this.element.addEventListener("mouseleave", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素の位置を移動する
  changeTranslate(movingDistanceX: number, movingDistanceY: number) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      movingDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      movingDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // ポインターの動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x === null ||
      this.pointerStartPosition.y === null
    ) {
      return;
    }

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

const movableElement = new MovableElement("element");

See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition: ElementPosition;
  // ポインタ-の動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });

    this.element.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x === null ||
        this.pointerStartPosition.y === null
      ) {
        return;
      }

      const pointerMovingDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovingDistanceY = event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovingDistanceX, pointerMovingDistanceY);
    });

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });

    this.element.addEventListener("mouseleave", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素の位置を移動する
  changeTranslate(movingDistanceX: number, movingDistanceY: number) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      movingDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      movingDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // ポインターの動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x === null ||
      this.pointerStartPosition.y === null
    ) {
      return;
    }

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

new MovableElement("element");

See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

パソコン、スマホの両方とも対応しています。

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element?: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition?: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition?: ElementPosition;
  // ポインタの動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });
    this.element.addEventListener("touchstart", (event: TouchEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.touches[0].clientX;
      this.pointerStartPosition.y = event.touches[0].clientY;
    });

    window.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x == null ||
        this.pointerStartPosition.y == null
      )
        return;

      const pointerMovedDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovedDistanceY = event.clientY - this.pointerStartPosition.y;
      this.moveDistance(pointerMovedDistanceX, pointerMovedDistanceY);
    });
    window.addEventListener(
      "touchmove",
      (event: TouchEvent) => {
        if (
          this.pointerStartPosition.x == null ||
          this.pointerStartPosition.y == null
        )
          return;

        // touchmove中はスクロールをキャンセルする
        event.preventDefault();

        const pointerMovedDistanceX =
          event.touches[0].clientX - this.pointerStartPosition.x;
        const pointerMovedDistanceY =
          event.touches[0].clientY - this.pointerStartPosition.y;
        this.moveDistance(pointerMovedDistanceX, pointerMovedDistanceY);
      },
      // touchmove中はスクロールをキャンセルする
      { passive: false }
    );

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });
    window.addEventListener("touchend", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素を現在位置からの距離だけ移動させる
  moveDistance(distanceX: number, distanceY: number) {
    // 補正値
    const correctionX =
      this.elementStartPosition.left - this.elementInitialPosition.left;
    const correctionY =
      this.elementStartPosition.top - this.elementInitialPosition.top;

    // 目標値
    const targetX = correctionX + distanceX;
    const targetY = correctionY + distanceY;

    this.element.style.transform = `translate(${targetX}px, ${targetY}px)`;
  }

  // 要素の動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x == null ||
      this.pointerStartPosition.y == null
    )
      return;

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

new MovableElement('element');

ここから色々応用できそう。

100日チャレンジの200日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

200日目は

おはようございます
200日目

udemyでcss+メディアクエリ、vue.js、webサイトコーディング
この休み中に、3つの講座やってます。2つぐらいおわりそうだから、もう1～2つぐらいやりたいな#早起きチャレンジ#駆け出しエンジニアと繋がりたい #100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) December 31, 2019