HTML5 ドラッグ関数rag_html/css_WEB-ITnose

1. ドラッグ オブジェクトを作成します。
true: 要素はドラッグできます。
auto:ブラウザ自体が要素をドラッグできるかどうかを決定します。

2. ドラッグ イベントを処理する

オブジェクトをドラッグすると、次のようなドラッグ イベントがトリガーされます。

A.dragstart: 要素のドラッグが開始されるときにトリガーされます。
B.drag: 要素のドラッグ プロセス中にトリガーされます。 C .dragend: 要素のドラッグが終了するとトリガーされます


3. ドロップエリアを作成します

① ドラッグされたオブジェクトがドロップエリアに入ると、関連するイベントがトリガーされます

A.dragenter: ドラッグオブジェクトが入ったときにトリガーされますドロップ領域; B.dragover: ドラッグ オブジェクトがドロップ領域内で移動したときにトリガーされます。 C.dragleave: ドラッグ オブジェクトがドロップ領域に配置されず、ドロップ領域から離れたときにトリガーされます。オブジェクトがドロップ領域にドロップされます。

②注: Dragenter と Dragonover はデフォルト イベントの影響を受ける可能性があるため、これら 2 つのイベントで e.preventDefault(); を使用してデフォルト イベントを回避します

4. データを転送するために dataTransfer を使用します

いつドラッグする必要があるかオブジェクトをドラッグして配信エリアにデータを転送する場合、dataTransfer には次の属性とメソッドがあります。

1.types: データの形式を返します。 2.getData(): 指定された形式のデータを返します。 (, ): 指定された形式のデータを設定します。
4.clearData(): 指定された形式のデータを削除します。 5.files: 配信されたファイルの情報配列を返します。 。 1.type: ファイルタイプ
2.size: ファイルサイズ

3.name: ファイル名

プログラミング例: