HTML5 ドラッグアンドドロップ (ドラッグアンドドロップ) の例を説明します-H5 チュートリアル-php.cn

HTML5 ドラッグアンドドロップ (ドラッグアンドドロップ) の例を説明します

零下一度

リリース： 2017-05-15 10:45:23

オリジナル

1510 人が閲覧しました

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

ドラッグアンドドロップ

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

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

ブラウザのサポート

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

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<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)"></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);
}

ログイン後にコピー

【関連推奨事項】

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード

2. 無料の h5 オンラインビデオチュートリアル

3. php.cn オリジナルの HTML5 ビデオチュートリアル

以上がHTML5 ドラッグアンドドロップ (ドラッグアンドドロップ) の例を説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

HTML5 ドラッグ アンド ドロップ (ドラッグ アンド ドロップ) の例を説明します

HTML5 ドラッグアンドドロップ (ドラッグアンドドロップ) の例を説明します