HTML5ドラッグアンドドロップ

HTML5からHTMLページ内のHTML要素をドラッグアンドドロップすることができます。通JavaScriptのイベントリスナーに決めることができると、どうなりますか？ユーザが行えます。

ドラッグアンドドロップ中にHTML要素は二つの役割を取ることができます：

ドラッグ可能
ターゲット/ドロップゾーンをドロップします。

ドラッグ可能な要素は、何らかのアクションが発生するために、ユーザーがHTMLページの周りをドラッグしてどこかにドロップできる要素です。これは一つ以上の要素にすることができます。,

ドロップターゲットまたはドロップゾーンは、ドラッグ可能な要素がドロップされる要素です。

ドラッグアンドドロップイベント

HTML要素をドラッグアンドドロップするときに何が起こるかを制御するには、次の3つの手順を実行する必要があります。

HTML要素をドラッグ可能に設定します。,
ドラッグ可能なHTML要素へのイベントリスナーのアタッチ
ドロップターゲットHTML要素へのイベントリスナーのアタッチ

イベントと属性は次のとおりです。

まず、ドラッグ可能にするHTML要素のdraggable="true"属性を設定します。

次に、dragstartおよびdragendイベントのドラッグ可能な要素にイベントリスナーをアタッチします。, 内部にこれらのイベントリスナーにディスパッチを実現致しましたかされるようにすることが、ユーザーの始まりをドラッグ素子のドラッグを終了する。

ドロップターゲット要素にイベントリスナーをアタッチします。リッスンできるイベントは、dragenter、dragover、dragleaveおよびdropです。

dragenterイベントは、ユーザーがドロップターゲットにドラッグ可能をドラッグすると発生します。, このイベントは、通常、マウスカーソルの位置によって決定される、ドラッグ可能な要素が外側から上に変更された場合にのみ発生します。

ドラッグ可能な要素がドロップターゲットの上にあると、dragoverイベントが発生し、ドラッグ可能な要素がドロップターゲットの上にドラッ

ユーザーがドラッグ可能なオブジェクトをドロップターゲットから再びドラッグすると、dragleaveイベントが発生します。

ユーザーがドロップターゲットにドラッグ可能なオブジェクトをドロップすると、dropイベントが発生します。,

ドラッグアンドドロップイベントの例

ここでは、遊ぶことができる例です。みをドラッグすると、以下のようHTML5のロゴをドロップターゲットと何が起こるか見てみてください. 画像をドロップしてもう一度ドラッグしてみてください。

ここに要素をドロップします

dragstart:
dragend:
dragenter:
dragover:
dragleave:
ドロップ:

ドラッグアンドドロップコード

ドラッグアンドドロップイベントを処理する方法を見てみましょう。, 最初に<img>ドラッグできる要素を作成することを確認します。そのためのHTMLコードは次のとおりです。

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

ドラッグ可能な要素ができたら、ドロップターゲットが必要です。私は<div>要素を使用します：

<div style="width: 200px; height: 200px;">Drop here</div>

ドラッグ可能な要素とドロップターゲット要素を取得したら、イベントリスナーをアタッチする, これはそのためのJavaScriptコードです：

dragStart()関数呼び出しevent.dataTransfer.setData()要素がドロップされたときにドロップターゲットに転送されるデータを設定ドロップアクションを適切に終了するために必要なデータは、ここに設定します。データとそのmimeタイプの両方を設定します。

dragOver()とdrop()イベントハンドラはどちらもevent.preventDefault()を呼び出し、falseを返します。する必要があることがわかりにくのドラッグアンドドロップが正常に動作, ブラウザの場合一部のデフォルトのドラッグ動作るのに必要なものを無効にするコードです。

drop()イベントハンドラ関数は、dragStart()event.dataTransfer.getData()の呼び出しを介してデータセットを読み取ります。データを適切に抽出するためのパラメータとしてmimeタイプを渡します。

HTML5でドラッグアンドドロップを実装するために必要なのはこれだけです。次のセクションで見るように、もう少し視覚的に楽しいものにすることができます。,

Visual Feedback

ドラッグアンドドロップイベントハンドラ関数を使用して、ユーザーにより明示的な視覚的なフィードバックを与えることができます。

まず、ドラッグされている要素をマークして、ユーザーがドラッグしている要素を確認できるようにすることができます。複数の要素を作り出して初めて実現できるものすべてをドラッグでも、ユーザの一台をドラッグされている. これは、dragstartイベントに応答して行うことができます。ここに例があります：

ドラッグが終了したら、境界線をもう一度削除します。, これは、dragendイベントに応答して行われます。これがどのように行われるかです：

ユーザーはドラッグされている要素を示す視覚的なフィードバックを取得します。

また、ドロップターゲットの上にドラッグされたときにドラッグ可能な要素をドロップできることをユーザーに示したいと思います。再び要素の境界線を変更します。これは、dragenter、dragleaveおよびdropイベントに応答して行います。, これがどのように行われるかです：

ドラッグ可能な要素がその上にドラッグされると、ドロップターゲットの境界線が緑色になり、破線になります。ドラッグ可能な要素が再びドラッグアウトされたとき、または要素がドロップターゲットにドロップされたときに、境界線が削除されます。

上記の例では、dragOver()イベントハンドラ関数は表示されませんでしたが、デフォルトのブラウザの動作を防ぐために追加してください。,

ビジュアルフィードバックが追加された後の完全なコードは次のとおりです。

DataTransferオブジェクト、effectsAllowed、dropEffect、およびsetDragImage()

DataTransferオブジェクトを使用して、ドラッグアンドドロップアクション中にユーザーに与えられるビジュアルフィードバックを増やすことができます。 Div id=”15a0357dbd”>

オブジェクトには2つの属性と、この目的で使用できる関数があります。, これらは次のとおりです。

effectsAllowed
dropEffect
setDragImage()

DataTransferdragstartおよびdropイベントオブジェクトのオブジェクトにアクセスできます。以下は、dragstarteffectsAllowedDataTransferオブジェクトのeffectsAllowedプロパティを設定するリスナー関数の例です。

effectsAllowedプロパティは、要素をドラッグアンドドロップするときに実行されるアクションの種類を示すためにマウスカーソルを変更するためにブラウザで使用されます。, 通常のマウスカーソルが変化するためのドラッグの要素は以下の目標です。前にはない。 effectsAllowedプロパティの有効な値は次のとおりです。

none
copy
move
copyMove
link
linkMove
copyLink
すべて
未初期化

dropEffectは、マウスがドロップターゲットの上に置いたときに何が起こるかを（カーソルを介して）ユーザーに表示することになっていますが、書き込み時（feb. 2014）ブラウザはこれを無視しているようです。, dropEffectプロパティの有効な値は次のとおりです。

none
copy
link
move

setDragImage(image, x, y)関数を使用して、ユーザーが要素をドラッグしたときにブラウザデフォルトでは、ブラウザには元の要素の半透明のコピーが表示されますが、別の画像が必要な場合は、この関数を使用して別の画像を設定できます。 xおよびyプロパティを使用して、表示時の画像の位置オフセットを設定できます。, デフォルトでは、ドラッグイメージの左上隅はマウスポインタの先端にあります。異なるxとyプロパティを設定することで、これを変更できます。正または負のいずれかを使用できますxおよびyオフセット。

ここでは、dragStart()イベントリスナー関数内のドラッグ画像を設定する方法を示すコード例です。

DataTransferオブジェクトのさまざまな設定で遊ぶことができます例を示します。, 変更してみてくださいeffectsAllowed画像をドラッグして、HTML5ロゴをdivドロップターゲットの上にドラッグするとどうなるか

ここにドロップ

ファイルをブラウザにドラッグする

ファイルシステムからブラウザにファイルをドラッグし、ドラッグされたファイルの名前と内容をJavaScriptから読み込むことができます。これはHTML5File APIを介して行います。, ドラッグされたファイルのファイル名を検出するドロップターゲットリスナーは次のとおりです。

var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i  Notice how the 
 function does not call the 
 function, but instead accesses the 
 property of the 
. The 
 property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon).
 You can read more about how to access the dragged files in my HTML5 file API tutorial.