まず
document.querySelectorAll()
で、ドラッグするdiv要素をピックアップする
ちなみに、#dragitems divは
id=”dragitems” の中のdiv要素という意味
これを変数 itemListへいれれば
ドラッグ対象となるdiv要素が配列要素として入る
ソースにすると
var itemList = document.querySelectorAll(“#dragitems div”);
次にドラッグ対象のdiv要素の
draggableプロパティへtrueを設定
これで、ドラッグ可能になる
ソースにすると
itemList[i].draggable=true;
単純にドラッグするだけならこれだけで
いいけど
普通はどこかにドロップする
このとき、必要なのがドロップ先で
なにがドロップされたか、
わかるようにすること
今回はドラッグ対象のdiv要素へIDをつけている
ドラッグが開始されると
div要素では
dragstartイベント
が発生する
このdragstartイベントを捕捉し、
ドロップ先に渡すデータを設定
ソースにすると
itemList[i].addEventListener(“dragstart”,fuction(evt){
ドロップ先にdivのIDを渡すには
Eventオブジェクトを介して
データのやりとりをする
Eventオブジェクトには
データのやりとりをするための
dataTransferオブジェクトがあるので
これを使う
dataTransferオブジェクトの
setData()
で、データをドロップ先へ渡せる
setData()は
最初のパラメータに
データの種類を示す文字を指定する
指定する文字は、すでに決まっていて
自分で任意のものを選ぶことは残念ながらできない
文字なら text
URLなら url
となる
ただし、ブラウザーによっては
text
しか使えないから
無難にいくならtextを指定するほうがよい
div要素のIDとかならtextになる
そして、ドロップ先に渡すデータは
setData()の
2番目のパラメータに指定する
dragstartイベントが発生したとき
ドラッグ開始された要素の情報が
Eventオブジェクトの
currentTargetオブジェクトに入る
この
currentTargetオブジェクトの
idプロパティへ
div要素のIDが入っているので
これをsetData()の
2番目のパラメータとして指定すれば
要素のIDを渡せる
ソースにすると
evt.dataTransfer.setData(“text”,evt.currentTarget.id);
draggable=trueは
ドラッグ可能にするだけで
ドロップするときの処理などは
Javascriptで書く必要があるので注意