drag

ドラッグ（イベント）

意味要素がドラッグ中のイベント。

dragとは？

要素をドラッグ中に連続して発火するイベント。ドラッグを開始するとこのイベントが継続的にトリガーされます。

dragの具体的な使い方

ドラッグ中の要素の位置を表示する

<div id="dragElement" draggable="true" style="width: 100px; height: 100px; background-color: #3498db; color: white; text-align: center; line-height: 100px; cursor: move;">ドラッグしてください</div>
<div id="positionInfo" style="margin-top: 20px;">位置: </div>
<script>
const dragElement = document.getElementById('dragElement');
const positionInfo = document.getElementById('positionInfo');

dragElement.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

dragElement.addEventListener('drag', (e) => {
  if (e.clientX !== 0 && e.clientY !== 0) {
    positionInfo.textContent = `位置: X=${e.clientX}, Y=${e.clientY}`;
  }
});

document.addEventListener('dragover', (e) => {
  e.preventDefault();
});

document.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text');
  const draggableElement = document.getElementById(id);
  draggableElement.style.position = 'absolute';
  draggableElement.style.left = `${e.clientX - 50}px`;
  draggableElement.style.top = `${e.clientY - 50}px`;
});
</script>

青い四角形の要素をドラッグすると、ドラッグ中の要素の位置（X座標とY座標）が表示されます。要素をドロップすると、その位置に要素が配置されます。

dragに関するよくある質問

Q. dragイベントの使い方は？

A. dragイベントは、要素に対してelement.addEventListener('drag', callback)の形で使用します。要素には draggable='true' 属性を設定する必要があります。

Q. dragイベントと関連イベントは？

A. dragイベントの他に、dragstart（ドラッグ開始時）、dragend（ドラッグ終了時）、dragenter（要素に入った時）、dragleave（要素から出た時）、dragover（要素の上にある時）、drop（ドロップ時）などの関連イベントがあります。

Q. ドラッグ中のデータ転送方法は？

A. event.dataTransferオブジェクトを使用して、ドラッグ中にデータを転送できます。setData()メソッドでデータをセットし、getData()メソッドで取得します。

dragが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのdragやmouseleave、dragstart、resize、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。