• サンプルを再生する
• サンプルのソースコードを確認する

ドラッグ・アンド・ドロップ

ドラッグ・アンド・ドロップの基本的な実装方法は次のドラッグ・アンド・ドロップの解説をご覧ください。

複数の表示オブジェクトに対して、同じイベントハンドラーのhandleMouseDown()関数を登録します。handleMouseDown()関数では、引数のevent.currentTargetを使うことで、どの表示オブジェクトでそのイベントが発生したのかを調べることができます。

pieceCircle.addEventListener("mousedown", handleMouseDown);
pieceRect.addEventListener("mousedown", handleMouseDown);
pieceStar.addEventListener("mousedown", handleMouseDown);

function handleMouseDown(event) {
  // currentTarget を使うことで、どれがマウスダウンされたか判別できる
  var piece = event.currentTarget;
  // (省略)
}

ドラッグ・アンド・ドロップの実装は次の通りとなります。

pieceCircle.addEventListener("mousedown", handleMouseDown);
pieceRect.addEventListener("mousedown", handleMouseDown);
pieceStar.addEventListener("mousedown", handleMouseDown);

function handleMouseDown(event) {
  // currentTarget を使うことで、どれがマウスダウンされたか判別できる
  var piece = event.currentTarget;

  //(省略)
  // マウスが押された場所を保存しておく
  var mouseDownX = stage.mouseX - piece.x;
  var mouseDownY = stage.mouseY - piece.y;

  // ドラッグ関連イベントを登録
  piece.addEventListener("pressmove", handlePressMove);
  piece.addEventListener("pressup", handlePressUp);

  function handlePressMove(event) {
    updateMousePosition(); // マウスの座標に追随
  }

  function handlePressUp(event) {
    updateMousePosition(); // マウスの座標に追随

    //(省略)

    // ドラッグ関連イベントを解除
    piece.removeEventListener("pressmove", handlePressMove);
    piece.removeEventListener("pressup", handlePressUp);
  }

  // マウスのドラッグ処理
  function updateMousePosition() {
    // オブジェクトの座標はマウスの座標に追随
    // ただしマウスダウンした場所のズレを補正
    piece.x = stage.mouseX - mouseDownX;
    piece.y = stage.mouseY - mouseDownY;
  }
}

吸着処理

対象とあたっているかを当たり判定をとり、当たり判定があるときに、対象のXY座標と同じ値を代入しましょう。

// マウスアップされたときに、目標のシェイプとの当たり判定をとる
var pt = targetBase.localToLocal(0, 0, piece);
var isHit = piece.hitTest(pt.x, pt.y);
if (isHit == true) {
  // 吸着させる
  piece.x = targetBase.x;
  piece.y = targetBase.y;
}