HTML5 チュートリアル - ドラッグアンドドロップ-htmlチュートリアル-php.cn

HTML5 チュートリアル - ドラッグアンドドロップ

黄舟

リリース： 2016-12-27 15:24:08

オリジナル

1647 人が閲覧しました

フロントエンドプログラマーの皆さん、こんにちは！この記事では、HTML5 の一般的な機能であるドラッグアンドドロップイベントを中心に、HTML5 チュートリアルに関する一連の知識を説明します。

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

ドラッグアンドドロップ

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

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

ブラウザのサポート

Internet Explorer 9、Firefox、Opera 12、Chrome、Safari 5 はドラッグアンドドロップをサポートしています。

注: ドラッグアンドドロップは Safari 5.1.2 ではサポートされていません。

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<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>
<div id=”div1″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″ />
</body>
</html>

ログイン後にコピー

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

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

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

<img draggable=”true” />

ログイン後にコピー

ドラッグする対象 – ondragstart と setData()

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

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

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

function drag(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() を呼び出します (drop イベントのデフォルトの動作はリンクします)フォームが開いています）。

dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータセットを返します。

ドラッグされたデータは、ドラッグされた要素 (「drag1」) の ID です。

配置した要素(対象要素)にドラッグした要素を追加します。

上記は HTML5 チュートリアルの内容です - ドラッグアンドドロップ詳細については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

HTML5 チュートリアル - ドラッグ アンド ドロップ

HTML5 チュートリアル - ドラッグアンドドロップ