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"draggable="true"ondragstart="drag(event)"width="336"height="69"/>
;