ホームページ > 記事 > ウェブフロントエンド > HTML5 を使用して個々の要素のドラッグ アンド ドロップを実装する方法
HTML5 を使用して個々の要素のドラッグ アンド ドロップを実装する方法
- 不言オリジナル
- 2018-12-01 14:07:563626ブラウズ
HTML5 を使用して単一の要素をドラッグ アンド ドロップするにはどうすればよいですか?この記事では、HTML 要素をドラッグ アンド ドロップするための HTML5 を使用して個々の要素のドラッグ アンド ドロップを実装する方法 コードを紹介します。具体的な実装内容を見てみましょう。
HTML5 のドラッグ アンド ドロップ機能を使用すると、HTML ページ要素をドラッグ アンド ドロップできます
具体的な例を見てみましょう
コードは次のとおりです
SimpleDragDrop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleDragDrop.css" />
<script>
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
var zone = document.querySelector('.dropzone');
zone.addEventListener('dragover', onDragOver, false);
zone.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}
</script>
</head>
<body onload="load();">
<div class="box" draggable="true"></div>
<div id="dropzone" class="dropzone">
</div>
</body>
</html>SimpleDragDrop.css
.box {
width:32px;
height:32px;
border:solid 1px #002f9f;
}
.dropzone {
margin-top:16px;
margin-bottom:16px;
width: 280px;
height: 64px;
border: solid 1px #808080;
}説明:
<div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div>
上の 2 つをページに表示します。 div の場合、class="box"、id="dropzone" を使用できます。ドラッグされたオブジェクトは、受け入れ領域が配置される div です。ドラッグ可能なオブジェクトの場合、ドラッグ可能なオブジェクトに draggable="true" を設定できます。
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
var zone = document.querySelector('.dropzone');
zone.addEventListener('dragover', onDragOver, false);
zone.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}上記のコードは、ドラッグ アンド ドロップ イベントを各要素に割り当てます。
ドラッグされる要素に対して、「dragstart」イベントを設定します。ドラッグが開始されると、onDragStart 関数が実行されます。
削除する要素には「dragover」「drop」イベントを設定します。ドラッグされた要素がドラッグ＆ドロップ領域に入ると onDragOver 関数が実行され、要素がドロップされると onDrop 関数が実行されます。
ドラッグスタートの場合、dataTransfer オブジェクトの値を設定するコードを記述する必要があります。 dataTransfer に挿入された値は使用しませんが、このコードがなければデータがなくても機能します。
実行結果
Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。
上部のボックスをドラッグします。下のフレームまでドラッグすると、フレーム内に「onDragOver」が表示されます。
フレーム内に配置すると、フレーム内に「onDrop」の文字が表示されます。
例 2: イベントを追加した要素をドラッグ アンド ドロップする方法
コードは次のとおりです
SimpleDragDrop2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleDragDrop2.css" />
<script>
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
box.addEventListener('dragend', onDragEnd, false);
var box = document.querySelector('.dropzone');
box.addEventListener('dragenter', onDragEnter, false);
box.addEventListener('dragover', onDragOver, false);
box.addEventListener('dragleave', onDragLeave, false);
box.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('Text', this.id);
this.textContent = 'onDragStart';
}
function onDragEnd(e) {
this.textContent = 'onDragEnd';
}
function onDragEnter(e) {
this.textContent = 'onDragEnter';
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDragLeave(e) {
this.textContent = 'onDragLeave';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}
</script>
</head>
<body onload="load();">
<div id="box" class="box" draggable="true"></div>
<div id="dropzone" class="dropzone"></div>
</body>
</html>SimpleDragDrop.css
.box {
width:32px;
height:32px;
border:solid 1px #d01313;
}
.dropzone {
margin-top:16px;
margin-bottom:16px;
width: 280px;
height: 64px;
border: solid 1px #808080;
}説明:
<div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div>
上記の例に示すように、ページには 2 ページの DIV が表示されます。ドラッグ可能なオブジェクトの場合は、ドラッグ可能なオブジェクトに draggable="true" を設定します。
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
box.addEventListener('dragend', onDragEnd, false);
var box = document.querySelector('.dropzone');
box.addEventListener('dragenter', onDragEnter, false);
box.addEventListener('dragover', onDragOver, false);
box.addEventListener('dragleave', onDragLeave, false);
box.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('Text', this.id);
this.textContent = 'onDragStart';
}
function onDragEnd(e) {
this.textContent = 'onDragEnd';
}
function onDragEnter(e) {
this.textContent = 'onDragEnter';
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDragLeave(e) {
this.textContent = 'onDragLeave';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}上記のコードは、ドラッグ アンド ドロップ イベントを各要素に割り当てます。
「dragstart」イベントと「dragend」イベントはドラッグされる側の要素に割り当てられます。ドラッグが開始されると、ondstart 関数が呼び出されます。ドラッグが完了すると、ondos agEs 関数が呼び出されます。
「dragenter」、「dragover」、「dragleave」、および「drop」イベントが、ドラッグされる要素に割り当てられます。ドラッグされた要素がドラッグ アンド ドロップ エリアに入ると、onDragEnter 関数が実行され、ドラッグ アンド ドロップ エリアから出ると、onDragOver 関数が実行されます。 OnDragLeave関数が実行されます。ドラッグされた要素がドロップされると、onDrop 関数が実行されます。
実行結果
Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。
赤い部分の四角い部分をドラッグします。この領域には「onDragStart」の文字が表示されます。
ドラッグを放すと、「onDragEnd」の文字の赤枠部分が表示されます。
赤いボックスの領域を再度ドラッグします。下部エリアにドラッグ＆ドロップすると、ドロップエリアに「onDragOver」の文字が表示されます。
ドラッグ＆ドロップエリアの赤枠部分までドラッグを放すと、下部エリアに「onDrop」の文字が表示されます。
赤いボックスを再度ドラッグして配置領域に重ねます。 「onDragOver」の文字が表示されます。
赤いボックスをドラッグし、ドラッグ アンド ドロップ領域の外にドラッグします。ドロップエリアの文字表示が「onDragLeave」に変わります。
以上がHTML5 を使用して個々の要素のドラッグ アンド ドロップを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。