HTML5 は 2 つの div 要素間で画像をドラッグ アンド ドロップする方法を実装します_html5 チュートリアルのヒント

オリジナルエフェクト

ドラッグ後の効果

コードは次のとおりです

コードをコピーします

コードは次のとおりです:

[コード]

< ;/body>

[/code]
少し複雑に見えるかもしれませんが、ドラッグ アンド ドロップのさまざまな部分を学習できます。イベントは別途。

要素をドラッグ可能として設定します

まず、要素をドラッグ可能にするために、draggable 属性を true に設定します。

コードをコピーします コードは次のとおりです:

ドラッグするもの - ondragstart と setData()

次に、要素がドラッグされたときに何が起こるかを指定します。

上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(

event) を呼び出します。

dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します。

コードをコピーコードは次のとおりです:

functionrag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

この例では、データ型は「Text」で、値はドラッグ可能な要素 (「drag1」) の ID です。

を配置する場所 - ondragover

ondragover イベントは、ドラッグされたデータを配置する場所を指定します。

デフォルトでは、データ/要素を他の要素内に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。

これは、ondragover イベントの

event.preventDefault() メソッドを呼び出すことで行われます:

コードをコピーコードは次のとおりです:

event.preventDefault()

配置する - ドロップ

ドラッグしたデータをドロップするとドロップイベントが発生します。

上記の例では、ondrop 属性は関数 Drop(

event) を呼び出します。

コードをコピー コードは次のとおりです:

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData( "テキスト ");
ev.target.appendChild(document.getElementById(data));

コードの説明:

preventDefault() を呼び出して、ブラウザのデフォルトのデータ処理 (ドロップ イベントのデフォルトの動作はリンクとして開くこと) を回避し、dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータ セットを返します。ドラッグされたデータは、ドラッグされた要素の ID (「drag1」) になり、配置された要素 (ターゲット要素) にドラッグされた要素を追加します