html 5-ドラッグアンドドロップAPI

一、draggable属性の設定
ドラッグ&ドロップする要素のdraggableプロパティをtrueに設定し、img要素とhrefプロパティのあるa要素はデフォルトでドラッグ&ドロップが許可されます.
二、ドラッグ＆ドロップに関するイベント
≪イベント｜Events｜ldap≫
イベントを生成する要素
説明
dragstart
ドラッグ＆ドロップされた要素source
ドラッグ＆ドロップ操作を開始
drag
ドラッグ＆ドロップされた要素source
ドラッグ＆ドロップ中
dragenter
ドラッグ＆ドロップ中にマウスが通過する要素
ドラッグ＆ドロップされた要素がこの要素の範囲に入り始める
dragover
ドラッグ＆ドロップ中にマウスが通過する要素
ドラッグ＆ドロップされた要素をこの要素の範囲内で移動
dragleave
ドラッグ＆ドロップ中にマウスが通過する要素
ドラッグ＆ドロップされた要素は、この要素の範囲から離れています.
drop
ドラッグ＆ドロップ先dest
要素がこの要素にドラッグ＆ドロップされます
dragend
ドラッグ＆ドロップしたオブジェクト要素
ドラッグアンドドロップ操作の終了
三、DataTransferオブジェクト:1.カスタムドラッグ＆ドロップアイコン2.携帯データ3.ドラッグ＆ドロップによる表示
DataTransferオブジェクトのプロパティとメソッド
説明
dropEffectプロパティ
ドラッグ＆ドロップのビジュアル効果ですが、この属性値の設定はeffectAllowed属性値が許容する範囲内でなければなりません.コピー効果、移動効果などがあります.
effectAllowedプロパティ
ドラッグ＆ドロップを許可するビジュアル効果
typeプロパティ
携帯データの種類
clearData(DOMString format)メソッド
DataTransferオブジェクトのデータを明確にし、パラメータを省略するとすべてクリア
setDta(DOMString format,DOMString data)メソッド
DataTransferオブジェクトへのデータの格納
getData(DOMString format)メソッド
DataTransferオブジェクトに保存されているデータの読み込み
setDragImage(Element image,long x,long y)
ドラッグ＆ドロップアイコンの設定
 

function init(){

    var source=document.getElementById("source");

    var dest=document.getElementById("dest");

    source.addEventListener("dragstart", function(ev){

        var data=ev.dataTransfer;//  dataTransfer  

        data.effectAllowed="all";//           

        var icon=document.createElement("img");//    

        icon.src="http://hdn.xnimg.cn/photos/hdn321/20091015/0955/tiny_GkFr_16185d019116.jpg";

        data.setDragImage(icon,-10,10);//      

        data.setData("text/plain","  ，        ");// dataTransfer       

    },false);

    dest.addEventListener("dragend", function(ev){

        ev.preventDefault();// dragend dragover  drop   ，  preventDefault  ，
//                      ，                 ，         

    },false);

    dest.addEventListener("drop",function(ev){

        var data=ev.dataTransfer;

        var text=data.getData("text/plain");//             

        dest.textContent+=text;

        ev.preventDefault();

        ev.stopPropagation();

    },false);

}

document.ondragover=function(e){

    e.preventDefault();

}

document.ondrop=function(e){

    e.preventDefault();