简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5 ドラッグ アンド ドロップ: ドラッグ アンド ドロップとは何を意味しますか?それの使い方？

寻∝梦
リリース： 2018-08-13 19:11:34
オリジナル
2762 人が閲覧しました

HTML5 は現在とても人気があります。この記事では主に HTML5 のドラッグ アンド ドロップ要素とその使用方法について説明します。

HTML5 におけるドラッグ アンド ドロップとは何ですか?

ドラッグ アンド ドロップは、オブジェクトを取得して、後で別の場所にドラッグする一般的な機能です。 , ドラッグ アンド ドロップの目的は、オブジェクトを配置したい場所に配置できるようにすることです。 HTML5 では、ドラッグ アンド ドロップが標準の一部であり、任意の要素をドラッグ アンド ドロップできます。

ドラッグとドロップはそれぞれどういう意味ですか?

darg: イベント本体はドラッグされた要素であり、ドラッグされた要素がドラッグ アンド ドロップされるときにトリガーされます。

drop: イベント本文はターゲット要素であり、ターゲット要素がドラッグ アンド ドロップされた要素を完全に受け入れるとトリガーされます。

ブラウザのサポート

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

例は次のとおりです。少し複雑ですが、ドラッグ アンド ドロップ イベントのさまざまな部分を個別に調べることができます。

イベントをドラッグ アンド ドロップするための詳細な手順:

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

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

<!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>
ログイン後にコピー

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

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

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

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

<img draggable="true">
ログイン後にコピー

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

ヒント: このサイトの「ondragstart イベント」セクションで、さらに役立つ情報を学ぶことができます。

2. 配置場所 - ondragover

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

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

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

event.preventDefault()

3. 配置 - ondrop

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

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

function drag(ev)        
{
ev.dataTransfer.setData("Text",ev.target.id);       
}
ログイン後にコピー

コードの説明:

ブラウザのデフォルトのデータ処理を回避するために、preventDefault() を呼び出します (drop イベントのデフォルトの動作はリンクします)フォームで開きます)

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

ドラッグされたデータはドラッグされた要素のID(「drag1」)であり、ドラッグされた要素は配置された要素(対象要素)に追加されます。

【関連おすすめ】

HTMLをゼロから学べるHTMLの基本要素


HTMLとHTML5の発展の歴史

以上がHTML5 ドラッグ アンド ドロップ: ドラッグ アンド ドロップとは何を意味しますか?それの使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
HTML5拖放（Drag和Drop）
ソース：php.cn
前の記事：HTML5 で新しく一般的に使用されるフォーム要素は何ですか?添付の使用例 次の記事：HTML5 で HTML 地理位置情報を正しく使用するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1724
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1880
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1591
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1508
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1546
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！