ドラッグ＆ドロップを検出する

ドラッグ＆ドロップを検出するには、onDragStartのイベントを補足して、dataTransferのメソッドでデータを受け渡します。 draggable属性がデフォルトで有効なのはimg要素とa要素だけなので、その他はドラッグ＆ドロップを行わせる場合は明示的にdraggable=”true”に指定する必要があります。

５つの花を四角の中にドロップして移動させるサンプルです。

---

ここにドロップして下さい。

---

---

<img draggable="true" id="flower" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif" />
<img draggable="true" id="dandellion" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFRjLRFcgpbOK4Wsu1Vxn1JpTFdsudqjftA7aLis-DL6kfxPC1yVoZRtAos4VoZ4DP58387QcGMox9i6gCdFPzKH8XtVCBVszxWRlxALs8vSjzyVARrBhr5HduOB-9oVVl03CYs9x2dX9/s1600/Dandelion.gif" />
<img draggable="true" id="African Daisy" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-8DlPX2EtuZTqgNwmhVVe790bdl6-SjcPKssqbovYxDjigJnvbGl2H5w9M_cR27vCHUQZvWJpSlw_c4bkXhwBospATjzSqyfVtKZHleRSaAUp3DCs_sZl-z2fIlt1N6dWlJz-cXJqkWEd/s1600/African+Daisy.gif" />
<img draggable="true" id="Ixia" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1oL5S3SeWlU3KXi5FAVaKNkZmUbwPQwKxJhnLKxXkXev-IrCLET55LGMH9SZhxHxFktkwXmmdiBrSXE18-iETdWJ13MuOGplhjxGG7kBA7tu7H-zDKt9Hx2uWLT2gVTYna5a_dMp_LEYE/s1600/Ixia.gif" />
<img draggable="true" id="Spiked" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg15pYaJtscUa0JI3AnlUte5n4Ado14vWIyegi5RVaqYlvhw1DAfTgaBte3nLJIAT0udeKO6hkrEfktIP6Hv4jAUk8dKjaF6Srf-742mTLfGlzNIMnlo_veE8pJcPQ86PPpDdR0nqjeaET7/s1600/Spiked.gif" />
<br />
<div id="drop1" ondragenter="onDragEnter1(event)" ondragleave="onDragLeave1(event)" ondragover="onDragOver1(event)" ondrop="onDrop1(event)" style="border-radius: 4px; border: 1px solid #0000FF; height: 100px; width: 400px;">
ここにドロップして下さい。
</div>
<div id="debug">
</div>
<script type="text/javascript">
var debug = document.getElementById("debug");
function onDragStart1(event) {
 debug.innerHTML = "Drag Start";
 event.dataTransfer.setData("text", event.target.id);
}
function onDrop1(event) {
 debug.innerHTML = "On Drop";
 var id = event.dataTransfer.getData("text");
 var elm = document.getElementById(id);
 event.currentTarget.appendChild(elm);
 event.preventDefault();
}
function onDragOver1(event) {
 debug.innerHTML = "On Drag Over";
 event.preventDefault();
}
function onDragEnter1(event) {
 debug.innerHTML = "On Drag Enter";
}
function onDragLeave1(event) {
 debug.innerHTML = "On Drag Leave";
}
</script>

---

onDrop1 / onDragOver1にある、「preventDefault()」は、デフォルトではDropイベントが無効化されているので、このメソッド呼び出しでDropイベントを有効化しています。

メソッド・プロパティ	内容
setData(key , value)	ドラッグ＆ドロップされるデータをセットする keyには"text"か"url"のみ指定できる。
getData(key)	ドラッグ＆ドロップされたデータを取得する keyには"text"か"url"のみ指定できる。
clearData	ドラッグ＆ドロップされたデータをクリアする
types	setDataメソッドでセットされた情報のtype(text/plain等)を取得する
files	他アプリケーションからドラッグされたファイル情報を取得する
setDragImage(image, X, Y)	ドラッグ中に表示されるイメージを指定する
addElement(element)	ドラッグ中に表示されるイメージに要素を追加する