HTML5におけるドラッグ＆ドロップイベント（ドラッグ＆ドロップ）の詳細説明-H5 チュートリアル-php.cn

HTML5におけるドラッグ＆ドロップイベント（ドラッグ＆ドロップ）の詳細説明

黄舟

リリース： 2017-02-21 13:27:30

オリジナル

1431 人が閲覧しました

ブラウザのサポート

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

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

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

<!DOCTYPE html>
<html> 
<head> 
<style type="text/css"> 
#p1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<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> 
 
<p>请把 Aseoe logo的图片拖放到矩形中：p> 
 
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">p> 
<br /> 
<img id="drag1" src="http://www.aseoe.com/statics/images/eoe/logo.png" 
draggable="true" ondragstart="drag(event)" /> 
 
</body> 
</html>

ログイン後にコピー

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

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

ドラッグするもの - ondragstartそしてsetData()

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

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

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

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

ログイン後にコピー

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

配置場所 - 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() メソッドと同じ型のデータセットを返します。

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

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

概要

上記はドラッグとドラッグの詳細な説明ですHTML5 のドロップイベント (ドラッグアンドドロップ)。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。