HTML5Drag&DropAPI

HTML5Drag&DropAPI
参考HTML 5 drag&dropドラッグ＆ドロップの概要
紹介する
ドラッグアンドドロップAPIは主に2つの要素に関し、1つはユーザーがマウスでドラッグした要素であり、1つはドラッグされた要素が移動した要素である.1.DataTransferオブジェクト:オブジェクトをドラッグして伝達するための媒体であり、一般的にEventである.dataTransfer. draggableプロパティ:ラベル要素にdraggable=trueを設定します.そうしないと効果がありません.たとえば、 1.ondragstartイベント:ドラッグ要素がドラッグされ始めるとトリガーされるイベントで、このイベントはドラッグ要素に作用する.ondragenterイベント:ドラッグ要素がターゲット要素に入るとトリガーされるイベントで、このイベントはターゲット要素に作用する.ondragoverイベント:ターゲット要素をドラッグして移動するときにトリガーされるイベントで、このイベントはターゲット要素に作用する.ondropイベント:ドラッグされた要素がターゲット要素上で同時にマウスを離すとトリガーされたイベントで、このイベントはターゲット要素上で6に作用する.ondragendイベント:ドラッグが完了するとトリガーされるイベントであり、このイベントはドラッグ要素に作用する.Event.preventDefault()メソッド:デフォルトのイベントメソッドなどの実行をブロックします.ondragoverでpreventDefault()を実行する必要があります.そうしないと、ondropイベントはトリガーされません.また、他のアプリケーションやファイルからドラッグ&ドロップした場合、特に画像の場合、デフォルトの動作はこの画像や関連情報を表示し、dropを実際に実行するわけではありません.この場合documentのondragoverイベントで直接乾かす必要があります.8.Event.effectAllowedプロパティ:ドラッグ効果です.
≪インスタンス｜Instance｜emdw≫
まず、ドラッグされた要素ラベルにdraggable="true"を付けます.

<div class="slide-bar"  draggable="true">div>

//     A      ，B     
//     
A.ondragstart = function(event) {
    event.dataTransfer.setData("text", event.target.innerHTML); // Firefox       
    return true;
  };
//     B
B.ondragenter = function(ev) {
    // do sth.
    return true;
};
//     B
B.ondragover = function(event) {
    event.preventDefault(); //   
    // do sth.
    return true;
  };
//    B     
B.ondrop = function(event) {
    //do sth.
    return false;
};