ホームページ > 記事 > ウェブフロントエンド > HTML5のドラッグ＆ドロップコピー機能の実装
HTML5のドラッグ＆ドロップコピー機能の実装
- 高洛峰オリジナル
- 2017-02-17 17:11:192157ブラウズ
ドラッグ アンド ドロップは一般的な機能で、オブジェクトを取得して別の場所にドラッグします。 HTML5 では、ドラッグが標準の一部であり、任意の要素をドラッグできます。 Html5 のドラッグ アンド ドロップは非常に一般的な機能ですが、ほとんどのドラッグ アンド ドロップの場合は、Html5 のドラッグ アンド ドロップ コピー機能を実装する必要があります。通常の Html5 を使用するだけです。途中でいくつかの小さな変更を加えてください。
追記: このブログ投稿はホームページの記事ではなく、単なるメモです。
ブラウザのサポート
Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5
v1.0 コード部分
<!DOCTYPE html>
<html>
<head>
<styletype="text/css">
#p1 {
width: 700px;
height: 120px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#drag1 {
cursor:pointer;
}
</style>
<scripttype="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");
var item = document.getElementById(data).cloneNode();
ev.target.appendChild(item);
}
</script>
</head>
<body>
<p>请把 Windows Azure 的图片拖放到矩形中：</p>
<pid="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br/>
<br/>
<br/>
<br/>
<br/>
<imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" draggable="true" ondragstart="drag(event)"/>
</body>
</html>
コード分析
実装のアイデアは、ドラッグされた要素を複製し、その複製された要素を指定された場所に appendChild() することです
Html5 のドラッグ アンド コピーを実装するためのコア コード.cloneNode()
HTML5 のドラッグ アンド コピーが完了したら、実際には、appendChild() の実行後に多くのことを完了できます。これは特定のニーズによって異なります
従来の HTML5 ドラッグ アンド ドロップを実装したいだけの場合は、var item = document.getElementById(data).cloneNode(); を削除してください。 、そして ev.target .appendChild(data);
この記事を通じて、皆さんのお役に立てれば幸いです。このサイトをよろしくお願いします。
HTML5 のドラッグ アンド ドロップ コピー機能の実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。