ドラッグ/ドロップは非常に一般的な機能です。オブジェクトをつかんで、配置する領域にドラッグできます。多くのJavaScriptは、jQueryuiのDoganandDropコンポーネントなど、関連する関数を同様に実装しています。 HTML5では、ドラッグドロップが標準操作になり、任意の要素がサポートします。この関数は非常に一般的であるため、すべての主流のブラウザはこの操作をサポートしています。
ドラッグドラッグ可能なプロパティを有効にしますとても簡単です。以下に示すように、この要素のドラッグ属性をドラッグ可能に変更するだけで、この要素はドラッグをサポートします。
<imgdraggable = "true"/>
ドラッグ中にデータを渡しますドラッグプロセス中に、コンバージョンプロセスを完了するために、対応する論理データを渡す必要があることがよくあります。ここでは、主にデータ転送にDataTransferオブジェクトを使用します。最初にそのメンバーを見てみましょう：
メソッドメンバー：
setData（フォーマット、データ）：ドラッグされたデータをDatAtransferオブジェクトに割り当てます。
形式：ドラッグされるデータのタイプを指定する文字列パラメーター。このパラメーターの値は、テキスト（テキストタイプ）とURL（URLタイプ）にすることができます。このパラメーターはケースに依存しないため、テキストはテキストと同じです。
データ：ドラッグされているデータを指定するバリアント型パラメーター。データは、テキスト、イメージパス、URLなどです。
この関数には、ブールタイプの返品値があります。 trueとは、データがDatAtransferに正常に追加されることを意味し、Falseは失敗したことを意味します。必要に応じて、このパラメーターを使用して、いくつかのロジックを継続する必要があるかどうかを決定できます。
getData（フォーマット）：DatAtransferに保存されているドラッグデータを取得します。
形式はSetDataと同じを意味し、値はテキスト（テキストタイプ）およびURL（URLタイプ）になります。
ClearData（フォーマット）：指定されたタイプのデータを削除します。
上記で指定できるテキスト（テキストタイプ）とURL（URLタイプ）に加えて、ここで形式は次の値をとることもできます：ファイルファイル、HTML-HTML要素、画像イメージ。
この方法を使用して、ドラッグされたデータ型を選択的に処理できます。
属性メンバー：EffectAllowed：データソース要素のデータが実行できる操作を設定または取得します。
属性タイプは文字列であり、値範囲は次のとおりです。
コピーコピーデータ。
リンクリンクデータ。
移動モバイルデータ
Copylink-ターゲットオブジェクトによって決定されたデータをコピーまたはリンクします。
Copymove-ターゲットオブジェクトによって決定されたデータをコピーまたは移動します。
linkmove-ターゲットオブジェクトによって決定されたデータをリンクまたは移動します。
すべての操作がサポートされています。
ドラッグなしは禁止されています。
ININITIALIZED-デフォルト値は、デフォルトの動作を採用します。
EffectAllowOwNoneに設定した後、ドラッグは禁止されていますが、マウスの形状はドラッグできないオブジェクトの形状をまだ示していることに注意してください。このマウスの形状を表示したくない場合は、ウィンドウのイベントイベントのプロパティReturnValueをFalseに設定する必要があります。
DROPEFFECT：ドラッグされたターゲットと関連するマウスの形状の設定または許可操作を取得します。
属性タイプは文字列であり、値範囲は次のとおりです。コピー - コピーとして表示されるマウスの形状。
リンク - マウスは接続の形状として表示されます。
移動 - マウスは動きの形状として表示されます。
なし（デフォルト） - マウスはドラッグせずに形状として表示されます。
EffectAllowedは、データソースによってサポートされている操作を指定するため、通常はOndragstartイベントで指定されます。 Dropeffectは、ターゲットをドラッグすることでサポートされるアクションを指定するため、通常、ドラッグされたターゲットのOndragenter、Ondragover、Ondropなどのイベントで使用されます。
ファイル：ドラッグされたファイルFilelistのリストを返します。
タイプ：Ondragstart（ドラッグデータ）で送信されたデータの種類のリスト。
DataTransferオブジェクトの存在により、ドラッグされたデータソースとターゲット要素の間に論理データを渡すことができます。通常、SetDataメソッドを使用して、データソース要素のOnDragstartイベントでデータを提供し、ターゲット要素でGetDataメソッドを使用してデータを取得します。
ドラッグ中にトリガーされたイベント以下は、ドラッグしてドロップするときに発生するイベントです。基本的に、イベントのトリガー順序は次の順序です。
Dragstart：ドラッグする要素がドラッグし始めたときにトリガーされます。このイベントオブジェクトは、ドラッグされた要素です。
ドラッグ：要素をドラッグするときにトリガーされたこのイベントオブジェクトは、ドラッグされた要素です。
Dragenter：ターゲット要素に要素をドラッグするときにトリガーされます。このイベントオブジェクトはターゲット要素です。
Dragover：要素をドラッグしてターゲット要素を移動するときにトリガーされます。このイベントオブジェクトはターゲット要素です。
DragLeave：ターゲット要素から要素をドラッグするときにトリガーされます。このイベントオブジェクトはターゲット要素です。
ドロップ：ドラッグされた要素がターゲット要素に配置されたときにトリガーされます。このイベントオブジェクトはターゲット要素です。
Dragend：ドロップ後にトリガーされます。これは、ドラッグが完了したときにトリガーされます。このイベントオブジェクトは、ドラッグされた要素です。
基本的に、イベントパラメーターイベントは関連要素を渡し、簡単に変更できます。ここでは、各イベントを処理する必要はありません。通常、いくつかのメインイベントを接続する必要があります。
ドラッグスタートイベントこのイベントから渡されたパラメーターには多くの情報が含まれており、ドラッグされた要素（event.target）を簡単に取得できます。ドラッグデータ（event.datatransfer.setData）を設定できます。したがって、ドラッグの背後にあるロジックを簡単に実装できます（もちろん、バインドすると他のパラメーターを渡すこともできます）。
ドラッグ中 - Ondrag、Ondragover、Ondragenter、およびOndragleaveイベントONDRAGイベントのオブジェクトはドラッグ要素であり、このイベントは通常、頻繁に処理されません。 Ondragenterイベントは、現在の要素にドラッグするときに発生し、現在の要素からドラッグするときにOndragLeaveイベントが発生し、現在の要素をドラッグするときにOndragoverイベントが発生します。ここで注意すべきことの1つは、デフォルトでは、ブラウザが要素のドロップを禁止するため、要素をドロップするには、この関数でfalseを返すか、event.preventdefault（）メソッドを呼び出す必要があることです。次の例に示すように。
ドラッグエンド - Ondrop、OndragendイベントDraggableデータがドロップされると、ドロップイベントがトリガーされます。ドロップが終了した後、ドラッグエンドイベントがトリガーされ、このイベントは比較的少なく使用されます。
簡単な例を見てみましょう。
<！doctypehtml>
<html>
<head>
<scriptType = "text/javascript">
functionallowdrop（ev）{
ev.preventdefault（）;
}
functiondrag（ev）{
ev.datatransfer.setdata（ "Text"、ev.target.id）;
}
functiondrop（ev）{
vardata = ev.datatransfer.getData（ "text"）;
ev.target.appendChild（document.getElementById（data））;
ev.preventdefault（）;
}
</script>
</head>
<body>
<divid = "div1" ondrop = "drop（event）" ondragover = "lowtdrop（event）"> </div>
<imgid = "drag1" src = "img_logo.gif" draggable = "true" ondragstart = "drag（event）" width = "336" height = "69"/>
</body>
</html>
ファイルをドラッグしてドラッグします上記の例では、DatAtransferのさまざまな方法と特性を使用しています。インターネット上の別の興味深いアプリケーションを見てみましょう。Webページに画像をドラッグアンドドロップしてから、Webページに表示します。このアプリケーションは、DataTransferのファイルプロパティを使用します。
<！doctypehtml>
<html>
<head>
<metacharset = "utf-8">
<title> html5ドラッグアンドドロップファイル</title>
<style>
#Section {Font-Family： "Georgia"、 "Microsoft yahei"、 "Chinese Song";}
.container {display：inline-block; min-height：200px; min-width：360px; color：＃f30; padding：30px; border：3pxsolid＃ddd; -moz-border-radius：10px; -webkit-border-radius：10px; border-radius：10px;}
.preview {max-width：360px;}
＃files-list {position：absolute; top：0; left：500px;}
#list {width：460px;}
＃list.preview {max-width：250px;}
#listp {color：＃888; font-size：12px;}
＃list.green {color：＃09c;}
</style>
</head>
<body>
<divid = "section">
<p>画像を下のコンテナにドラッグします：</p>
<divid = "container" class = "container">
</div>
<divid = "files-list">
<p>ドラッグされたファイル：</p>
<ulid = "list"> </ul>
</div>
</div>
<スクリプト>
if（window.filereader）{
varlist = document.getElementById（ 'list'）、
cnt = document.getElementById（ 'container'）;
//写真があるかどうかを判断します
functionisimage（type）{
switch（type）{
case'image/jpeg '：
case'image/png '：
case'image/gif '：
case'image/bmp '：
case'image/jpg '：
returntrue;
デフォルト：
ReturnFalse;
}
}
//ハンドルドラッグアンドドロップファイルリスト
functionhandlefileselect（evt）{
evt.stoppropagation（）;
evt.preventdefault（）;
varfiles = evt.datatransfer.files;
for（vari = 0、f; f = files [i]; i ++）{
vart = f.type？f.type： 'n/a'、
reader = newFileReader（）、
look = function（f、img）{
list.innerhtml+= '<li> <strong>'+f.name+'</strong>（'+t+
'） - '+f.size+'bytes <p>'+img+'</p> </li>';
cnt.innerhtml = img;
}、
isimg = isimage（t）、
IMG;
//取得した写真を処理します
if（isimg）{
reader.onload =（function（thefile）{
returnFunction（e）{
img = '<imgclass = "preview" src = "'+e.target.result+'" title = "'+thefile.name+'"/>';
ルックス（TheFile、IMG）;
};
}）（f）
reader.readasdataurl（f）;
}それ以外{
img = '"o（（>ω<））o"、あなたが送ったのは写真ではありません！ ！ ';
ルックス（f、img）;
}
}
}
//挿入を処理し、効果をドラッグアウトします
functionhandledRagenter（evt）{this.setattribute（ 'style'、 'border-style：dashed;'）;}
functionhandledRagleAve（evt）{this.setattribute（ 'style'、 ''）;}
//ブラウザのデフォルトのイベントによって引き起こされるリダイレクトを防ぐために、ファイルのドラッグイベントを処理します
functionhandledRagover（evt）{
evt.stoppropagation（）;
evt.preventdefault（）;
}
cnt.addeventlistener（ 'dragenter'、handledragenter、false）;
cnt.addeventlistener（ 'dragover'、handledRagover、false）;
cnt.addeventlistener（ 'drop'、handlefileselect、false）;
cnt.addeventlistener（ 'dragleave'、handledRagleAve、false）;
}それ以外{
document.getElementById（ 'section'）。innerhtml = 'ブラウザはそれをサポートしていません、クラスメート';
}
</script>
</body>
</html>
この例では、HTML5でAPIを読み取るファイルが使用されます。FileReaderオブジェクト。このオブジェクトは、ファイルを読むための以下の非同期方法を提供します。
1.filereader.readasbinarystring（fileblob）
ファイルをバイナリモードで読むと、結果属性にはファイルのバイナリ形式が含まれます
2.filereader.readastext（fileblob、opt_encoding）
テキストモードでファイルを読み取ります。結果属性には、ファイルのテキスト形式が含まれます。デフォルトのデコードパラメーターはUTF-8です。
3.filereader.readasdataurl（file）
ファイルの結果を読み取るURLフォームには、ファイルのdataUrl形式が含まれます（通常、この方法で画像があります）。
上記の方法を使用してファイルを読み取ると、次のイベントがトリガーされます。
onloadstart、onprogress、onabort、onerror、onload、onloadend
これらのイベントは非常にシンプルで、必要に応じて接続するだけです。次のコードの例を参照してください。
functionStartRead（）{
//取得します
varfile = document.getElementById（ 'file'）。ファイル[0];
if（file）{
getastext（file）;
}
}
functionShotastext（readfile）{
varreader = newFileReader（）;
// readfileintomoryasutf-16
reader.readastext（readfile、 "utf-16"）;
// HandleProgress、Success、およびErrors
reader.onprogress = updateProgress;
reader.onload = loaded;
reader.onerror = errorhandler;
}
functionupdateprogress（evt）{
if（evt.lengthcomputable）{
//evt.loadedandevt.totalareprogresseventproperties
varloaded =（evt.loaded/evt.total）;
if（loaded <1）{
// ESTERETHEPROGBARLENGTH
//style.width =（loaded*200)+"px ";
}
}
}
functionloaded（evt）{
// gotinthereadfiledata
varfileString = evt.target.result;
// handleutf-16filedump
if（utils.regexp.ischinese（filestring））{
// chinesecharacters+namevalidation
}
それ以外{
// runothercharsettetest
}
//xhr.send(filestring）
}
functionerrorhandler（evt）{
if（evt.target.error.name == "notreadableerr"）{
// TheFileはBedbereadできませんでした
}
}
ここで簡単に説明しましょう：通常のファイルのダウンロードでは、window.openメソッドを使用します。
window.open（ 'http://aaa.bbbb.com/ccc.rar'、'_blank'）
実用的なリファレンス：公式文書：http：//www.w3schools.com/html5/良いチュートリアルのウェブサイト：http：//html5.phphube.com/html5/features/drapanddrop/
MSDNヘルプ：http：//msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
ファイルのドラッグアンドドロップの詳細な説明：http：//www.html5rocks.com/zh/tutorials/file/dndfiles/
ファイルをドラッグしてアップロードします：http：//www.chinaz.com/design/2010/0909/131984.shtml
ファイルの完全な例ドラッグアンドドロップアップロード：http：//www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
ファイルの例の例：http：//hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
window.openガイド：http：//www.vevb.com/liulf/archive/2010/03/01/1675511.html
window.openパラメーター：http：//www.koyoz.com/blog/?action=show&id=176