如何使用HTML5實作拖放單一元素
- 不言原創
- 2018-12-01 14:07:563671瀏覽
如何使用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>
頁面上顯示兩個上述的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功能將被執行。
在dragstart的情況下，你必須寫程式碼來設定dataTransfer物件的值。它不使用插入dataTransfer中的值，但是如果沒有這個程式碼的話，在沒有資料的情況下也會實作。
運行結果
使用網頁瀏覽器顯示上述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>如上例所示，頁面上顯示兩頁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函數。
以上是如何使用HTML5實作拖放單一元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn