JavaScriptのドラッグアンドドロップ
概要：このチュートリアルでは、JavaScriptのドラッグアンドドロップAPIについて学習します。
はじめにJavaScriptへのドラッグアンドドロップAPI
HTML5は正式にドラッグアンドドロップ仕様を導入しました。最近のほとんどのWebブラウザは、HTML5仕様に基づいたネイティブのドラッグアンドドロップを実装しています。
デフォルトでは、画像とテキストのみをドラッグできます。画像をドラッグするには、マウスボタンを押したまま移動します。テキストをドラッグするには、画像をドラッグするのと同じ方法で、テキストを強調表示してドラッグする必要があります。
HTML5仕様では、ほとんどすべての要素をドラッグできるように指定されています。要素をドラッグ可能にするには、値がtrueのdraggableプロパティをHTMLタグに追加します。例：
Code language: HTML, XML (xml)
ドラッグ可能な要素のイベント
要素をドラッグすると、これらのイベントは次の順序で発生します。
-
dragstart -
drag -
dragend
マウスボタンを押したままマウスを動かし始めると、ドラッグ可能な要素でdragstartイベントが発生します。あなたがドラッグしていること。カーソルがドロップなしの記号（線が入った円）に変わり、要素をそれ自体にドロップできないことを示します。
dragstartの後イベントが発生すると、要素をドラッグしている間、dragイベントが繰り返し発生します。
そしてdragendイベントが発生します要素のドラッグを停止したとき。
すべてのイベントのターゲット（e.target）は、ドラッグされている要素です。
デフォルトでは、ブラウザはドラッグされた要素の外観を変更しません。したがって、好みに基づいて外観をカスタマイズできます。
ドロップターゲットのイベント
有効なドロップターゲット上に要素をドラッグすると、これらのイベントは次の順序で発生します。
-
dragenter -
dragover -
dragleaveまたはdrop
dragenterイベントがすぐに発生します要素をドロップターゲット上にドラッグすると。
dragenterイベントが発生した後、dragoverイベントが繰り返し発生します。ドロップターゲットの境界内で要素をドラッグしている限り。
ドロップターゲットの境界の外側で要素をドラッグすると、dragoverイベントが発生を停止し、dragleaveイベントが発生します。
ターゲットに要素をドロップした場合、drop dragleaveイベントの代わりにイベントが発生します。
ターゲット（
）dragenter、dragover、dragleave、およびdropイベントはドロップターゲット要素です。
有効なドロップターゲット
ほとんどすべての要素がドロップターゲットイベントをサポートします（dragenter、dragover、dragleave、およびdrop）。ただし、デフォルトではドロップは許可されていません。
ドロップを許可しないドロップターゲットに要素をドロップすると、dropイベントが勝ちました。起動しません。
要素を有効なドロップターゲットに変換するには、dragenterとdragoverイベントは対応するイベントハンドラーでevent.preventDefault()メソッドを呼び出します。 （詳細については、サンプルセクションを参照してください）
dataTransferオブジェクトを使用したデータの転送
ドラッグアンドドロップアクションでデータを転送するには、オブジェクト。
dataTransferオブジェクトはイベントのプロパティです。ドラッグされた要素からドロップターゲットにデータを転送できます。
dataTransferオブジェクトには、setData()およびgetData()。
setData()を使用すると、ドラッグ操作のデータを指定した形式とデータに設定できます。 ：
Code language: CSS (css)
形式はtext/plainまたはtext/uri-listです。また、データは、ドラッグオブジェクトに追加するデータを表す文字列にすることができます。
getData()メソッドは、メソッド。
getData()は1つの引数を受け入れます：
形式はtext/plainまたはtext/uri-listです。 getData()は、setData()メソッドによって保存された文字列、またはドラッグ操作にデータが含まれていない場合は空の文字列を返します。
JavaScriptのドラッグアンドドロップの例
JavaScriptのドラッグアンドドロップAPIを示すために、次の簡単なドラッグアンドドロップアプリケーションを開発します。
プロジェクト構造
まず、drag-n-drop-basicsという名前の新しいフォルダを作成します。このフォルダー内に、cssとjsという2つのサブフォルダーを作成します。
次に、ivという名前の新しいファイルを作成します。 jsフォルダー内のid = “1238f56999″>
、cssstyle.css div>フォルダー、およびdrag-n-drop-basicsフォルダー内のindex.html。
3番目に、
と、index.htmlファイルのapp.jsにリンクするスクリプトタグは次のようになります：
index.htmlファイルを作成する
index.htmlファイルに次のコードを配置します。
このindex.htmlファイルでは、 .container要素を使用して見出しとdrop-targets要素を揃えました。
drop-targets要素内で、同じクラスboxの3つのdiv要素を配置しました。そして、最初のボックスにクラスitemの別のdiv要素を配置します。
index.htmlを開いた場合黄色のボックスをドラッグしようとすると、ドラッグできないことを示すカーソルが表示されます：
要素をドラッグ可能にするには、値がtrueのdraggableプロパティを追加します。次のようにHTMLタグに追加します。
Code language: JavaScript (javascript)
ここで、index.htmlを保存する場合は、ブラウザで開きます。ここでも、次のようにitem要素をドラッグできることがわかります。
ドラッグ可能な要素でイベントを処理する
style.cssファイルには.hideがあります要素を非表示にするクラス：
Code language: CSS (css)
app.jsファイルに、次のコードを追加します。
どのように動作：
- まず、
querySelector()を使用してドラッグ可能な要素を選択します。 - 次に、ドラッグ可能な要素へのイベントハンドラー。
- 3番目に、関数を定義して
dragstartイベント。
index.htmlファイルを開いてドラッグ可能な要素のドラッグを開始すると、drag starts...メッセージが表示されます。コンソール。
dragStartイベントハンドラーで、ドラッグ可能な要素のidを保存する必要があります。そして、それを非表示にする必要があります：
要素をドラッグすると、ドラッグを開始すると消えることがわかります。
これを解決するには、setTimeout()関数：
これで、ドラッグ可能な要素を元の位置からドラッグできます：
ドロップターゲットでイベントを処理する
style.cssファイルには
：
Code language: CSS (css)
app.jsでは、次のものが必要です。ドロップターゲット要素を選択し、dragenter、dragover、dragleave、および<これらの要素のdivid = "1e5569308a">
イベント：
dragenterおよび
イベントが発生します。 dragleaveおよびdropイベントが発生したときにスタイルを復元する必要があります。
これを行うには、追加と削除を行いますdrag-overクラスを次のようにdropターゲットに追加します：
ここで、ドラッグ可能な要素を別のドロップにドラッグすると、ターゲットの場合、次の図に示すように、ドロップターゲットの境界が変更されます。
ドロップターゲットを有効にするには、dragenterevent.preventDefault()を呼び出す必要があります。 >およびdragoverイベントハンドラーは次のようになります：
これを行わないと、dropイベントは発生しません。 div要素はデフォルトでは有効なドロップターゲットではないため、起動します。
ドラッグ可能な要素をドロップターゲットにドラッグすると、カーソルが表示されます。要素を削除できることを示す変更：
これで、item要素をドロップすると、すぐに消えることがわかります。
これを解決するには問題は、dropイベントのハンドルを追加する必要があります。
- まず、ividの
getData()メソッドを使用して、ドラッグ可能な要素のidを取得します。 = “cafe64ce48″>
オブジェクト。
draggable要素のbec293d4de “> クラス。
次のコードは、完全なdropイベントハンドラー：
ドラッグ可能な要素をドラッグアンドドロップすると、期待どおりに機能するはずです。
以下に、完全なapp.jsファイルを示します。
デモへのリンクは次のとおりです。
概要
-
draggableプロパティに値trueを追加します要素にドラッグできるようにします。 -
dragstart、drag、およびdragendイベントはドラッグ可能な要素で発生します。 -
dragenter、dragover、またはdropイベントがドロップターゲットで発生します。 - で
event.preventDefault()を呼び出します。dragenterおよびdragoverイベントハンドラーを使用して、要素を有効なドロップターゲットにします。 - iv id = “を使用しますドラッグアンドドロップ操作でデータを転送するための
setData()メソッドとgetData()メソッドを持つf1027dfda3 “>