ドラッグアンドドロップは、HTML5標準の一部です。
ブラウザのサポート
Internet Explorer 9、Firefox、Opera 12、Chrome、およびSafari 5は、ドラッグアンドドロップをサポートしています。
ドラッグエレメント、ドラッグレメント:
1。イベントの追加: Ondragstart 2.属性の追加:ドラッグ可能要素を配置し、ドロップエレメント:
1.イベントの追加:Ondargenter、Ondragover、Ondragleave、Ondragend、Ondrop
これは、分類への事件に似ており、以下の例をよく理解していません。
1.ページ上の要素間をドラッグアンドドロップします
以下の小さな例を使用しましょう。Divの間のドラッグアンドドロップが表示され、各イベントのトリガー方法が表示されます。
<!doctype html> <html> <head> <title> </itthaset = utf-8/> <style type = text/css> #dropele div {float:lef src = ../../jquery-1.8.3.js type = text/javascript charset = utf-8> </script> <script type = text/javascript>/*** drag(drag and drop)is。 HTML5標準コンポーネント。 *ブラウザは* Internet Explorer 9、Firefox、Opera 12、Chrome、およびSafari 5のドラッグアンドドロップをサポートしています。 * / $(fuins(){$(#dragele)[0] .ondragstart = function(event){console.log(drawstart); event.datatransfer.setdata(text、event.target.id);}; /* * *ドラッグデータが配置されると、ドロップイベントが発生します。 p] + @@); console.log(ondrop); .d(div).preventdefault();}; ;} $(#dropele)[0] .ondragleave = function(event){console.log(event); head> <body> border:width:100px:c :330px;あなたは次のように注意する必要があります:
A. Ontragoverは、イベントのデフォルトの動作を整理する必要があります。
B.ドロップイベントのデフォルトの動作はリンクで開かれているため、デフォルトの動作を防ぐ必要もあります。
また、ドラッグしてドロップするとき、イベントにはevent.datatransferオブジェクトが含まれていることに気付くこともできます。 、それをコピーします。
オブジェクトの他の方法は次のとおりです。
event.DatatRansfer:
items = [Object DataTransferntemlist] @@ drag_drop.html:44
files = [object filelist] @@ drag_drop.html:44
タイプ=テキスト/プレーン@@ drag_drop.html:44
effecalowed = all @@ drag_drop.html:44
dropeffect = none @@ drag_drop.html:44
cleartata = function cleanata(){[ネイティブコード]} @@ drag_drop.html:44
getData = fuory getData(){[ネイティブコード]} @@ drag_drop.html:44
setData = function setData(){[ネイティブコード]} @@ drag_drop.html:44
setDragImage = function setDragimage(){[ネイティブコード]} @@
JSを使用して、そのすべての属性を印刷しました。
1. GetData、Setdataの例は上記の例で使用されています。ClearDataは設定データをクリアすることです。
2。オペレーティングシステムで選択された1つ以上のファイルがDIVにドラッグされると、そのファイルが注目されます。
3。SetDragImage(画像、x、y)を使用して、マウスの動き中にマウスで移動するレンダリングを設定します。 Dragstartに設定する必要があります。
4。エフェクトが、ドラッグプロセスにドラッグするタイプは、これらの属性を無視できると思います。
上記は、この記事のすべての内容です。