html5でドラッグ＆ドロップの処理

イベントの種類とデフォルトの動作をキャンセル

ドラッグ＆ドロップを実現しようにもブラウザにはドロップされたものを表示するというデフォルトの動作があるので、そいつをキャンセルする必要がある。ただしドラッグを開始する「dragstart」は特にキャンセルする必要はない。

とくにhtml5（javascript）でドラッグ＆ドロップを実現する場合は、「dragover」のイベントをキャンセルするのは必須のようです。

ドラッグ＆ドロップを行うには下記のようなイベントが主にあります。

//ドラッグする要素をドラッグするとき
target.addEventListener("dragstart",function(event){

},true);

//ドロップ領域にドロップされたとき
target.addEventListener("drop",function(event){
event.preventDefault();
},true);

//ドロップ領域に入ったとき
target.addEventListener("dragenter",function(event){
event.preventDefault();
},true);

//ドロップ領域を出たとき
target.addEventListener("dragleave",function(event){
event.preventDefault();
},true);

//このイベントはドラッグ＆ドロップする要素には必須
target.addEventListener("dragover",function(event){
event.preventDefault();
},true);

ドラッグ＆ドロップの実装

最小限のコードで説明を書いていこう。説明するところは①～③まで。

//ドラッグさせる要素を取得する
var items = document.querySelectorAll("#dropItem li");

for (var i = 0; i < items.length; i++) {
    //①ドラッグプロパティを設定する
    items[i].draggable = true;
　　
　　//dragstartイベントを設定する
    items[i].addEventListener("dragstart", function(event) {
    
　　　　//②ドロップ先に渡すデータをセットする
        event.dataTransfer.setData("text", event.target.innerHTML);
    }, true);
}

//ドロップする要素を取得する
var droper = document.getElementById("dropArea");

//dropイベントを設定する
droper.addEventListener("drop", function(event) {
    //default cancel
    event.preventDefault();

    //③ドロップされたデータを取得する
    var items = event.dataTransfer.getData("text");
    try {
        droper.innerHTML += items;
    } catch (e) {
        droper.innherHTML += "データないっす";
    }
    //
    droper.style.backgroundColor = "#eee";
}, true);

//必ず設定するイベント　これがないとドラッグ＆ドロップができない
droper.addEventListener("dragover", function(event) {
    //default cancel
    event.preventDefault();
}, true);​

①ドラッグプロパティを設定する

ドラッグさせるにはドラッグ対象となる要素のプロパティでdraggableプロティをtrueにする必要がある
ただし、あくまでドラッグさせるだけなので、ドロップする時の処理やデータを渡すにはjavascriptの処理が必要になる。

②ドロップ先に渡すデータをセットする

ドラッグしている要素のデータはEventオブジェクトを介して行うのでEventオブジェクトのdataTransferオブジェクトのsetData()メソッドを利用する

setData()メソッドの引数は「setData(type,data)」となっていてkeyはtextやurlがある。
参考サイト：ドラッグ＆ドロップで要素間でデータを受け渡すには

③ドロップされたデータを取得する

ドロップ先で要素のデータを受け取るには同じくEventオブジェクトのdataTransferオブジェクトのgetData()メソッドを利用する

getData()メソッドの引数は「getData(type)」となっていてkeyはtextやurlがあり、ドロップされたデータと同じtypeのデータを取得できる。

参考になったサイト

• Drag and Dropの使い方 カテゴリの解説一覧
• TeckBooster「ドラッグ&ドロップ操作を活用する(1)」
• ＠IT「アドインなしで実現可能！ ドラッグ＆ドロップを使いこなそう」

上記を基にサンプルを作った

一応、dragenterとdragleave時はドラッグエリアの背景色を変えてます。