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

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

零下一度

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

オリジナル

1488 人が閲覧しました

ドラッグアンドドロップは 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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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

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

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