ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 は 2 つの div 要素間で画像をドラッグ アンド ドロップする方法を実装します_html5 チュートリアルのヒント

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

WBOY
WBOYオリジナル
2016-05-16 15:49:511791ブラウズ

オリジナルエフェクト

ドラッグ後の効果

コードは次のとおりです


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

[コード]











< ;/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」) になり、配置された要素 (ターゲット要素) にドラッグされた要素を追加します

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。