ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 は 2 つの div 要素間で画像をドラッグ アンド ドロップする方法を実装します_html5 チュートリアルのヒント
オリジナルエフェクト
ドラッグ後の効果
コードは次のとおりです
要素をドラッグ可能として設定します
まず、要素をドラッグ可能にするために、draggable 属性を true に設定します。ドラッグするもの - ondragstart と setData()
次に、要素がドラッグされたときに何が起こるかを指定します。上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(
event) を呼び出します。
dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します。を配置する場所 - ondragover
ondragover イベントは、ドラッグされたデータを配置する場所を指定します。デフォルトでは、データ/要素を他の要素内に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。
これは、ondragover イベントの
event.preventDefault() メソッドを呼び出すことで行われます:
配置する - ドロップ
ドラッグしたデータをドロップするとドロップイベントが発生します。上記の例では、ondrop 属性は関数 Drop(
event) を呼び出します。
preventDefault() を呼び出して、ブラウザのデフォルトのデータ処理 (ドロップ イベントのデフォルトの動作はリンクとして開くこと) を回避し、dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータ セットを返します。ドラッグされたデータは、ドラッグされた要素の ID (「drag1」) になり、配置された要素 (ターゲット要素) にドラッグされた要素を追加します