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

HTML5 は 2 つの div 要素間で画像をドラッグアンドドロップする方法を実装します

高洛峰

リリース： 2017-03-12 16:42:30

オリジナル

1605 人が閲覧しました

preventDefault() を呼び出して、ブラウザのデフォルトのデータ処理 (ドロップイベントのデフォルトの動作はリンクとして開くことです) を回避し、dataTransfer.getData(Text) メソッドを通じてドラッグされたデータを取得します。興味があれば、友達は元のエフェクトを参照できます

HTML5 は 2 つの div 要素間で画像をドラッグアンドドロップする方法を実装しますドラッグ後のエフェクト

HTML5 は 2 つの div 要素間で画像をドラッグアンドドロップする方法を実装しますコードは次のとおりです

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

[code]
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#p1, #p2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<img  src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" / alt="HTML5 は 2 つの div 要素間で画像をドラッグ アンド ドロップする方法を実装します" >
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">
 </p>
<p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
</body>
</html>

[/code]

ログイン後にコピー

It少し複雑に見えるかもしれませんが、区別することはできます。ドラッグアンドドロップイベントのさまざまな部分を調べてください。

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

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

を true に設定します:

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

<img  draggable="true" / alt="HTML5 は 2 つの div 要素間で画像をドラッグ アンド ドロップする方法を実装します" >

ログイン後にコピー

何をドラッグするか - ondragstart とsetData()

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

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

関数

、drag(

event) を呼び出します。 dataTransfer.setData() メソッドは、ドラッグされたデータの データ型

と値を設定します:

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

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

ログイン後にコピー

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

配置場所 - ondragover

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

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

これは、ondragover イベントの

event

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

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

event.preventDefault()

ログイン後にコピー

Place - ondrop

ドラッグされたデータが配置されると、drop イベントが発生しますが発生します。

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

event

)を呼び出します:

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

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
}

ログイン後にコピー

コードの説明:

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

以上がHTML5 は 2 つの div 要素間で画像をドラッグアンドドロップする方法を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。