ホームページ > 記事 > ウェブフロントエンド > H5にドラッグ＆ドロップ機能を実装する方法

H5にドラッグ＆ドロップ機能を実装する方法

php中世界最好的语言オリジナル: 2018-01-10 09:27:222341ブラウズ

HTML5ではドラッグアンドドロップが標準であり、どの要素もドラッグアンドドロップすることができます。H5で作成したドラッグアンドドロップ機能を使用した例です。一緒に見てみましょう。

<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   
</style>  
<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>  
<p>拖动 W3CSchool.cc 图片到矩形框中:</p>  
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
<br>  
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  
</body>  
</html>

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

まず、要素をドラッグ可能にするために、70ad500012d66cb8c97f97b908e6e933

3. ドラッグする内容 - ondragstart とsetData ()

次に、要素がドラッグされたときに何が起こるかを指定します。上の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。 dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します:

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

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

4. 配置場所 - ondragover

ondragover イベントは、ドラッグされたデータを配置する場所を指定します。デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことによって行われます。上記の例では、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」) です。ドラッグした要素をドロップした要素（ターゲット要素）に追加します。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。