Raid on HTML5 Javascript API Extension 4—ドラッグ/ドロップの概要_html5 チュートリアルのヒント

ドラッグ/ドロップは非常に一般的な機能です。オブジェクトをつかんで、配置したい領域にドラッグできます。 jQueryUI のドラッグアンドドロップ コンポーネントなど、多くの JavaScript が同様の機能を実装しています。 HTML5 では、ドラッグ アンド ドロップが標準操作となり、あらゆる要素でサポートされています。この機能は非常に一般的であるため、すべての主要なブラウザがこの操作をサポートしています。
ドラッグ-ドラッグ可能属性の有効化
次に示すように、要素のドラッグ属性をドラッグ可能に変更するだけで済みます。

コードをコピーコードは次のとおりです:

ドラッグ中のデータの転送 ドラッグプロセス中、変換プロセスを完了するために、対応する論理データを転送する必要があることがよくあります。ここでは主に dataTransfer オブジェクトを使用します。データ転送については、そのメンバーを見てみましょう:
メソッド メンバー:

コードをコピーしますコードは次のとおりです。

setData(format,data): ドラッグしたデータを dataTransfer オブジェクトに割り当てます。

format: ドラッグされるデータのタイプを指定する String パラメーター。このパラメータの値は、「Text」（テキスト タイプ）または「URL」（URL タイプ）です。このパラメータは大文字と小文字が区別されないため、「text」と「Text」を渡すことは同じです。
data: ドラッグされたデータを指定するバリアント型パラメーター。データはテキスト、画像パス、URL などです。
この関数の戻り値はブール値です。true はデータが dataTransfer に正常に追加されたことを意味し、false は失敗を意味します。必要に応じて、このパラメータを使用して、特定のロジックを実行し続けるかどうかを決定できます。

コードをコピー コードは次のとおりです:

getData(format): Get dataに保存されているデータドラッグデータを転送します。

format の意味は setData と同じで、値は "Text" (テキスト型) と "URL" (URL 型) です。

コードをコピーしますコードは次のとおりです:

clearData(format): delete指定された型のデータ。

上記で指定できる「Text」（テキストタイプ）と「URL」（URL タイプ）に加えて、ここでの形式は次の値も取ることができます: file-file、html- html要素、画像、画像。
このメソッドは、ドラッグされたデータ タイプを選択的に処理するために使用できます。

属性メンバー:

コードをコピーコードは次のとおりです:

effectAllowed: データ ソース要素内のデータによって実行できる操作を設定または取得します。

属性のタイプは文字列で、値の範囲は次のとおりです:
"link"-データをコピーします。 move data
"copyLink" - ターゲット オブジェクトによって決定される、データのコピーまたはリンク。
「copyMove」 - ターゲット オブジェクトによって決定される、データのコピーまたは移動。
"linkMove" - ターゲット オブジェクトによって決定されるように、データをリンクまたは移動します。
「all」 - すべての操作がサポートされます。
「なし」 - ドラッグを無効にします。
「初期化されていない」 - デフォルト値。デフォルトの動作を採用します。
effectAllowed を none に設定すると、ドラッグは禁止されますが、マウスの形状にはドラッグ可能なオブジェクトの形状が表示されないことに注意してください。このマウスの形状を表示したくない場合は、ウィンドウ イベントの属性 returnValue を設定する必要があります。偽に。

コードをコピーします

コードは次のとおりです:

dropEffect: を設定または取得します。ドラッグターゲットおよび関連するマウス形状に対して許可される操作。

属性のタイプは文字列で、値の範囲は次のとおりです:
"copy" - マウスはコピー時に形状として表示されます。
"link" - マウスは接続された形状として表示されます。
「移動」 - マウスは移動する形状として表示されます。
「なし」 (デフォルト) - マウスはドラッグせずに図形として表示されます。
effectAllowed はデータ ソースでサポートされる操作を指定するため、通常は ondragstart イベントで指定されます。 dropEffect は、ドラッグ アンド ドロップ ターゲットでサポートされる操作を指定するため、通常は、effectAllowed と組み合わせて、ドラッグ ターゲットの ondragenter、ondragover、および ondrop イベントで使用されます。

コードをコピー

コードは次のとおりです:

ファイル: のリストを返します。ドラッグされたファイル FileList。
タイプ: ondragstart で送信されるデータ (ドラッグされたデータ) タイプのリスト。

dataTransfer オブジェクトの存在により、ドラッグされたデータ ソースとターゲット要素の間で論理データを転送できるようになります。通常、setData メソッドを使用してデータ ソース要素の ondragstart イベントにデータを提供し、次に getData メソッドを使用してターゲット要素のデータを取得します。
ドラッグ中にトリガーされるイベント
基本的に、イベントのトリガーシーケンスは次の順序です:

コードをコピーします

コードは次のとおりです:

dragstart: ドラッグされる要素のドラッグが開始されるときにトリガーされます。オブジェクトは要素をドラッグ アンド ドロップします。
drag: 要素がドラッグされるとトリガーされます。このイベント オブジェクトは、ドラッグされた要素です。
dragenter: ドラッグ要素がターゲット要素に入るとトリガーされます。このイベント オブジェクトはターゲット要素です。
dragover: 要素がターゲット要素上でドラッグされて移動されるとトリガーされます。このイベント オブジェクトはターゲット要素です。
dragleave: 要素がターゲット要素からドラッグされるとトリガーされます。このイベント オブジェクトはターゲット要素です。
drop: ドラッグされた要素がターゲット要素内に配置されるとトリガーされます。このイベント オブジェクトはターゲット要素です。
dragend: ドロップ後にトリガーされます。つまり、ドラッグが完了したときにトリガーされます。このイベント オブジェクトは、ドラッグされた要素です。

基本的に、イベントのイベント パラメーターは関連する要素に渡され、簡単に変更できます。ここでは、すべてのイベントを処理する必要はありません。通常はメイン イベントを接続するだけで済みます。
Drag start-ondragstart イベント
このイベントから渡されるパラメーターには非常に豊富な情報が含まれており、そこからドラッグされた要素 (event.Target) を簡単に取得できます。ドラッグされたデータを設定できます。 (event.dataTransfer.setData); これにより、ドラッグの背後にあるロジックを簡単に実装できます (もちろん、バインド時に他のパラメーターを渡すこともできます)。
ドラッグ プロセス中 - ondrag、ondragover、ondragenter、および ondragleave イベント
ondrag イベントのオブジェクトはドラッグされた要素であり、通常、このイベントはそれほど頻繁には処理されません。 ondragenter イベントはドラッグが現在の要素に入ったときに発生し、ondragleave イベントはドラッグが現在の要素から出たときに発生し、ondragover イベントはドラッグが現在の要素内で移動したときに発生します。
ここで注意する必要があるのは 1 つだけです。デフォルトでは、ブラウザは要素のドロップを禁止しているため、要素のドロップを許可するには、この関数で false を返すか、event.preventDefault を呼び出す必要があります。 （） 方法。以下の例に示すように。
ドラッグ終了-ondrop、ondragend イベント
ドラッグ可能なデータがドロップされると、drop イベントがトリガーされます。ドロップが完了すると、dragend イベントがトリガーされますが、このイベントが使用されることは比較的まれです。
簡単な例を見てみましょう:

コードをコピーします

コードは次のとおりです:

functionlowDrop(ev){
ev.
;
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
functiondrop(ev); >vardata=ev .dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
スクリプト>



< ;imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/>
;



ファイルのドラッグ
上の例では、dataTransfer のさまざまなメソッドと属性が使用されています。インターネット上の別の興味深いアプリケーションを見てみましょう。画像を Web ページにドラッグ アンド ドロップし、Web ページに表示します。ウェブページ。このアプリケーションは dataTransfer の files 属性を使用します。

コードをコピーします

コードは次のとおりです:

🎜>



>

画像を下のコンテナにドラッグします:

ドラッグされたファイル:

< ; ulid="リスト">

if(window.FileReader){
= 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(),
looks=function(f,img){
list.innerHTML ='

' f.name '< ;/strong>(' t
')-' f.size 'bytes

' img '

'; img;
} ,
isImg=isImage(t),
//処理された画像
if(isImg){
reader.onload=(function(theFile) {
returnfunction (e){
img=''; look(theFile,img );
})(f)
reader.readAsDataURL(f);
img='"o((>ω< ))o"、あなたが送ったのは写真ではありません! ！ ';
looks(f,img);
}
}
}
//挿入およびドラッグ効果を処理します
functionhandleDragEnter(evt){this.setAttribute('style' , 'border-style:dashed;');}
functionhandleDragLeave(evt){this.setAttribute('style','');}
//ファイルのドラッグイン イベントを処理して、ブラウザのデフォルト イベントが発生しないようにします。
functionhandleDragOver(evt){
evt.stopPropagation();
}
cnt.addEventListener('dragenter',handleDragEnter,false); のリダイレクトを引き起こす🎜>cnt.addEventListener('dragover',handleDragOver,false);
cnt.addEventListener('drop',handleFileSelect,false);
cnt.addEventListener('dragleave',handleDragLeave,false); }else{
document.getElementById('section').innerHTML='あなたのブラウザはそれをサポートしていません、クラスメート'



この例では、html5 のファイル読み取り API を使用します。このオブジェクトは、ファイルを読み取るための次の非同期メソッドを提供します。
バイナリ モードでファイルを読み取り、結果属性にはファイルのバイナリ形式が含まれます
2.FileReader.readAsText(fileBlob,opt_encoding)
テキスト モードでファイルを読み取り、結果属性にはファイルのテキスト形式であり、デフォルトのデコードパラメータは「utf-8」です。
3.FileReader.readAsDataURL(file)
URL 形式でファイルを読み取った結果には、ファイルの DataURL 形式が含まれます (画像は通常この方法で使用されます)。
上記の方法を使用してファイルが読み取られると、次のイベントがトリガーされます:





コードをコピー

コードは次のとおりです:


onloadstart、onprogress、onabort、onerror、onload、onloadend


これらのイベントは非常にシンプルで、必要に応じて接続するだけです。以下のコード例を見てください:

コードをコピーします

コードは次のとおりです:

functionstartRead() {
//obtaininputelementthroughDOM
varfile=document.getElementById('file').files[0];
if(file){
getAsText(file); }
}
functiongetAsText(readFile){
varreader=newFileReader();
//ReadfileintomemoryasUTF-16
reader.readAsText(readFile,"UTF-16"); /Handleprogress,success,anderrors
reader.onprogress=updateProgress;
reader.onerror=errorHandler;
functionupdateProgress(evt){
if( evt.lengthComputable){
//evt.loadedanddevt.totalareProgressEventproperties
varloaded=(evt.loaded/evt.total);
if(loaded<1){
//プログバーの長さを増やす
/ /style.width= (loaded*200) "px";
}
}
}
functionloaded(evt){
//readfiledata を取得
varfileString=evt.target.result ;
/ /HandleUTF-16filedump
if(utils.regexp.is Chinese(fileString)){
//中国語文字名の検証
}
else{
//runothercharsettest
}
// xhr.send(fileString)
}
functionerrorHandler(evt){
if(evt.target.error.name=="NotReadableErr"){
//ファイルを読み取ることができませんでした
}
}


ここで簡単に説明します: 通常のファイルのダウンロードでは、window.open メソッドを使用します。例:

コードをコピーします

コードは次のとおりです: window.open('http://aaa.bbbb.com/ccc.rar','_blank' )

実用的なリファレンス:

公式ドキュメント: http://www.w3schools.com/html5/
優れたチュートリアル Web サイト: http://html5.phphubei.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. cnblogs.com/liaofeng/archive/ 2011/05/18/2049928.htmlファイルのダウンロードの例:
http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05window.open 戦略:
http://www.cnblogs.com/liulf/archive/2010/03/01/1675511.htmlwindow.open パラメータ:
http:/ /www.koyoz.com/blog /?action=show&id=176