FC2ブログ

ドラッグ処理のメモ

まず
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で書く必要があるので注意
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック