ホームページ > 記事 > ウェブフロントエンド > H5 を使用してドラッグ アンド ドロップ効果を実現する方法
H5 を使用してドラッグ アンド ドロップ効果を実現する方法
- php中世界最好的语言オリジナル
- 2018-03-26 11:37:571901ブラウズ
今回は、H5 を使用してドラッグ アンド ドロップ効果を実現する方法と、H5 を使用してドラッグ アンド ドロップ効果を実現するための 注意点 について説明します。以下は実際的なケースです。一見。
ドラッグ アンド ドロップ
ドラッグ アンド ドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。 HTML5 では、ドラッグ アンド ドロップが標準の一部であり、あらゆる要素をドラッグ アンド ドロップできます。 Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はドラッグをサポートしています。注: Safari 5.1.2 はドラッグをサポートしていません。
例:<!DOCTYPE html>
<html>
<head>
<title>拖放</title>
<style type="text/css">
#p1{width:360px;height:220px;padding:20px;border:1px solid black;}
</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 id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br />
<img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" />
</body>
</html>まず、要素をドラッグ可能にするために、draggable 属性 を true に設定します。 = "true">次に、要素がドラッグされたときに何が起こるかを指定します。
上記の例では、
ondragstart 属性 は、ドラッグするデータを指定する関数、drag(event) を呼び出します。
dataTransfer.setData() メソッド は、ドラッグされたデータの データ型 と値を設定します: function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
} この例では、データ型は「Text」で、値はドラッグ可能な要素の ID ( 「ドラッグ1」)。
ondragover イベント は、ドラッグされたデータを配置する場所を指定します。 デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。 これは、
ondragover イベントのevent.preventDefault()メソッドを呼び出すことによって行われます: event.preventDefault()ドラッグされたデータが配置されると、ドロップイベントが発生します。
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」)ドラッグされた要素を配置要素(ターゲット要素)に追加します
前後にドラッグします:
2つの間を前後にドラッグしたい場合上記のコードを少し変更するだけです。 本文のコードを次のように変更します。
<body> <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" /></p> <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p> </body>
次に、スタイルに #p2 を追加します。
<style type="text/css">
#p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}
</style> このようにして、前後にドラッグ アンド ドロップできます。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:
ページングクエリの使用方法の詳細な説明
以上がH5 を使用してドラッグ アンド ドロップ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。