CSSでカーソルをカスタマイズ：ドラッグ & ドロップを簡単にする

2024-06-30

CSS でドラッグ可能なカーソルを作成する方法

必要なもの

HTML 要素
CSS ファイル

手順

ドラッグ可能な要素を定義する

HTML で、ドラッグ可能な要素を定義します。例えば、以下のように div 要素を使用できます。

<div id="draggable">ドラッグ可能な要素</div>

要素の CSS を定義する

CSS ファイルで、ドラッグ可能な要素の cursor プロパティを grab に設定します。これにより、カーソルが要素の上に置かれたときに、手の形になります。

#draggable {
  cursor: grab;
}

ドラッグ中のカーソルを変更する（オプション）

要素がドラッグされている間、カーソルを別の形状に変更することもできます。これを行うには、JavaScript を使用して、mousedown イベントと mousemove イベントをリッスンし、要素がドラッグされているときに cursor プロパティを grabbing に設定する必要があります。

const draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('mousedown', (event) => {
  draggableElement.style.cursor = 'grabbing';
});

draggableElement.addEventListener('mousemove', (event) => {
  // ドラッグ処理を実行
});

draggableElement.addEventListener('mouseup', (event) => {
  draggableElement.style.cursor = 'grab';
});

この例では、要素がドラッグされている間、カーソルは握った手に変わります。

CSS でドラッグ可能なカーソルを作成する - サンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ドラッグ可能なカーソル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="draggable">ドラッグ可能な要素</div>

  <script src="script.js"></script>
</body>
</html>

CSS

#draggable {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 50px auto;
  text-align: center;
  line-height: 100px;
  cursor: grab;
}

#draggable:active {
  cursor: grabbing;
}

JavaScript

const draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('mousedown', (event) => {
  draggableElement.style.cursor = 'grabbing';
});

draggableElement.addEventListener('mousemove', (event) => {
  // ドラッグ処理を実行
  // 例：要素を移動
  draggableElement.style.left = event.clientX - draggableElement.offsetWidth / 2 + 'px';
  draggableElement.style.top = event.clientY - draggableElement.offsetHeight / 2 + 'px';
});

draggableElement.addEventListener('mouseup', (event) => {
  draggableElement.style.cursor = 'grab';
});

このコードを実行すると、ブラウザに青い四角形が表示されます。四角形の上にマウスポインターを置くと、カーソルが手の形になります。四角形をクリックしてドラッグすると、カーソルが握った手に変わり、四角形を移動できます。

このサンプルコードはあくまで基本的な例です。必要に応じて、スタイルやドラッグ処理を自由にカスタマイズできます。

CSS でドラッグ可能なカーソルを作成する - その他の方法

画像を使用する

cursor プロパティを使用して、カーソルとして使用する画像ファイルを指定できます。これにより、よりカスタマイズされた外観を作成できます。

#draggable {
  cursor: url('cursor.png'), auto;
}

この例では、cursor.png という名前の画像ファイルが cursor として使用されます。要素の上にカーソルが置かれていない場合は、ブラウザのデフォルトカーソルが表示されます。

CSS アニメーションを使用して、ドラッグ時のカーソルの動きをアニメーション化できます。これにより、よりインタラクティブな外観を作成できます。

#draggable {
  cursor: grabbing;
  animation: grab-animation 1s infinite alternate;
}

@keyframes grab-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}