html5 Drag and Drop

html 5 Drag and Dropは要素をドラッグ&ドロップすることができます.私たちのファイルのアップロードはデスクトッププログラムのように、直接ドラッグ&ドロップしてアップロードすることができます!!
ブラウザのデフォルトでドラッグ＆ドロップできる要素には、画像、テキスト(テキストを選択してから移動する必要がある)、リンクがあります.他の要素をドラッグ&ドロップするにはdraggable=「true」を追加できます.

 <div  draggable = "true"></div>

draggableには、次のプロパティがあります.

trueは、この要素が

をドラッグ可能であることを示す.

falseは、この要素がドラッグできないことを示す

auto imgとhref付きラベルaのラベルはドラッグ可能を示すほか、他のラベルはドラッグ不可

を示す.
html 5ドラッグアンドドロップ、要素とターゲットの位置をドラッグします.それぞれのイベントは次のとおりです.
要素をドラッグ:1.dragstartドラッグ前にトリガー(マウスを押してドラッグを開始)2.dragドラッグ中にトリガー(マウスが移動しなくても連続的にトリガー)3.dragendドラッグ終了トリガ
目標位置:1.dragenterがターゲット位置に入るトリガ2.dragoverが目標位置に移動するトリガ3.dropはマウスを放して瞬時に4をトリガする.dragleaveマウスがターゲット位置素から離れるとトリガーされます
ドラッグ・プロシージャ全体のイベント順序:dragstart->drag->dragnter->dragover->dragleave->drop->dragend
ターゲット位置イベントを設定したり、ドラッグ要素の進入や出入りなどのスタイルを変更したりすることで、ユーザーフレンドリーな体験を変更することができます.

var drag = document.querySelector("#drag");  //      
var target = document.querySelector("#target"); //      

target.addEventListener("dragenter",function(ev){
 this.style.border = "2px solid #ddd";
 console.log("dragenter");
});
target.addEventListener("dragover",function(ev){
 this.style.border = "2px solid #ddd";
 ev.preventDefault();   //  dragover      
 console.log("dragover");
});

target.addEventListener("drop",function(ev){
 this.style.border = "2px solid green";
 console.log("drop");
});

target.addEventListener("dragleave",function(ev){
 this.style.border = "2px dashed #ddd";
 console.log("dragleave");
});

dropのイベントをキャプチャするには、dragoverイベントのデフォルトの動作をキャンセルする必要があります.スタイルを変えるだけでは足りません.ドラッグ&ドロップ要素とターゲット位置で通信する必要があります.例えば、ドラッグ&ドロップ要素をターゲット位置に置く必要があります.dataT ransfer、データの通信使者を利用します.

//    ，           
//html  
 <img src = "color.png" id = "drag"/>
 <div class = "target" id = "target"></div>
//js  
drag.addEventListener("dragstart",function(ev){
     ev.dataTransfer.setData("title","    ");
});

target.addEventListener("drop",function(ev){
 this.style.border = "2px solid green";
 var title = ev.dataTransfer.getData("title");
 var imgUri = ev.dataTransfer.getData("text/uri-list");
 target.innerHTML = '<img src="' + imgUri + '" title="' + title + '" width="100px" height = "100px" />';  
  ev.preventDefault();   //         
});

イベントについてDataTransfer、よく使われる次の属性があります

setData(key,value)両方のパラメータは文字列タイプ

です.

getData(key)getData()は、setData()によって保存する値

を取得することができる.

effectAllowedターゲット位置イベントで設定され、デフォルトはuninitialized「uninitialized」:ドラッグされた要素の配置動作がありません.「none」:ドラッグされた要素は動作しません.「copy」:「copy」の値を持つdropEffectのみが許可されます.「link」:値が「link」のdropEffectのみが許可されます.「move」:値が「move」のdropEffectのみが許可されます.「copyLink」:値が「copy」および「link」のdropEffectを許可します.「copyMove」:値が「copy」および「link」のdropEffectを許可します.「linkMove」:職階「link」および「move」のdropEffectを許可します.「all」:任意のdropEffectを許可します.

dropEffectはドラッグアンドドロップ要素イベントで設定され、デフォルトはallで、カーソルスタイルには「none」があります.ドラッグした要素をここに置くことはできません.これはテキストボックス以外のすべての要素のデフォルトです.「move」:ドラッグした要素を配置ターゲットに移動する必要があります.「copy」:ドラッグした要素を配置ターゲットにコピーする必要があります.「link」:ターゲットを配置するとドラッグする要素が開きます(ただし、ドラッグする要素はリンクでURLがある必要があります).

setDragImage(element,x,y)は、ドラッグが発生するとカーソルの下に表示される副画像を指定します.この方法で受け入れられる3つのパラメータは,それぞれ表示するHTML要素と画像中のカーソルのx,y座標である.ここで、HTML要素(非表示の要素であってもよい)は、画像であってもよいし、他の要素であってもよい.[はい](Yes)画像は画像を表示し、他の要素はレンダリングされた要素を表示します.この方法を実装するブラウザには、Firefox 3.5+、Safari 4+、Chorme filesが外部ドラッグファイルの類似配列の集合(length)を取得する.コレクション内の各要素にはtypeプロパティがあり、ドラッグしたファイルのタイプを順番に判断します.この属性を実現するブラウザには、IE 10+、Firefox 3.5+、Chromeがあります.

getData(),setData()
setData()メソッドの最初のパラメータであり、getDAta()メソッドの唯一のパラメータでもあります.保存されたデータ型を表す文字列です.値は「text」または「URL」です.テキストボックスのテキストをドラッグすると、ブラウザはsetData()メソッドを呼び出し、ドラッグしたテキストを「text」形式でdataTransferオブジェクトに保存します.同様に、リンクや画像をドラッグアンドドロップする場合、setData()メソッドが呼び出され、URLが保存する、ターゲット位置にドラッグアンドドロップする場合、evが呼び出されない.preventDefault();ブラウザはデフォルトで関連するデータ型に応じて適切な動作をします.保存がURLである場合、放浪者はそのURLを開きます.

target.addEventListener("drop",function(ev){
 this.style.border = "2px solid green";
 var title = ev.dataTransfer.getData("title");
 var imgUri = ev.dataTransfer.getData("text/uri-list");
 target.innerHTML = '<img src="' + imgUri + '" title="' + title + '" width="100px" height = "100px" />';  
 // ev.preventDefault(); //  ，            ，            ，              ,      ，      setData       url
});

effectAllowed dropEffect

drag.addEventListener("dragstart",function(ev){
    ev.dataTransfer.effectAllowed = "move"; //               
});

target.addEventListener("dragover",function(ev){
 ev.dataTransfer.dropEffect = "copy"; //               
 ev.preventDefault();  
});

effectAllowedとdropEffectは、ドラッグアイコンのスタイルを変更してカーソルを異なる記号に表示することができます.dropEffectアトリビュートはeffectAllowedアトリビュートを組み合わせるだけで使用できます.effectAllowedとdropEffectの値は同じで、ドラッグ&ドロップ要素を配置するにはターゲットの場所が使用できます.