HTML5 のドラッグアンドドロップ

ドラッグアンドドロップは HTML5 標準の一部です。

PHP 中国語 Web サイトのアイコンを長方形のボックスにドラッグします。

ドラッグアンドドロップ

ドラッグアンドドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。

HTML5 ではドラッグアンドドロップが標準の一部であり、あらゆる要素をドラッグアンドドロップできます。

ブラウザのサポート

Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はドラッグをサポートしています。

注: Safari 5.1.2 はドラッグをサポートしていません

HTML5 のドラッグアンドドロップの例

以下の例は、単純なドラッグアンドドロップの例です:

例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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>

<p>拖动 php中文网 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://img.php.cn/upload/course/000/000/010/58043146a1da1979.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

例の実行»

[サンプルの実行] ボタンをクリックして、オンラインのサンプルを表示します

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

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

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

<imgraggable="true">

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

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

上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。

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

関数ドラッグ(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

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

配置場所 - ondragover

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

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

これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます。

event.preventDefault()

- ondrop

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

上記の例では、ondrop 属性は関数、drop(event) を呼び出します:

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

コードの説明:

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

その他の例

画像をドラッグアンドドロップして戻す
2 つの <div> 要素間に画像をドラッグアンドドロップする方法。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img src="https://img.php.cn/upload/course/000/000/010/58049330dcf69494.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

HTML5 のドラッグ アンド ドロップ

ドラッグ アンド ドロップ