HTML5 拖放（Drag 和 Drop）詳解與實(shí)例代碼
我要評(píng)論簡(jiǎn)介
拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
先點(diǎn)擊一個(gè)小例子：在用戶(hù)開(kāi)始拖動(dòng) <p> 元素時(shí)執(zhí)行 JavaScript
<p draggable="true" ondragstart="myFunction(event)">拖動(dòng)我!</p>
提示： 鏈接和圖片默認(rèn)是可拖動(dòng)的，不需要 draggable 屬性。
定義和用法
在拖放的過(guò)程中會(huì)觸發(fā)以下事件：
- 在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素): ondragstart - 用戶(hù)開(kāi)始拖動(dòng)元素時(shí)觸發(fā)
- ondrag - 元素正在拖動(dòng)時(shí)觸發(fā)
- ondragend - 用戶(hù)完成元素拖動(dòng)后觸發(fā)
- 釋放目標(biāo)時(shí)觸發(fā)的事件: ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件
- ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
- ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開(kāi)其容器范圍內(nèi)時(shí)觸發(fā)此事件
- ondrop - 在一個(gè)拖動(dòng)過(guò)程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動(dòng)。
注意:Safari 5.1.2不支持拖動(dòng)；在拖動(dòng)元素時(shí)，每隔 350 毫秒會(huì)觸發(fā) ondragover 事件。
實(shí)例
先貼代碼，再逐一解釋?zhuān)?/p>
<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖動(dòng)img_w3slogo.gif圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
<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>
</body>
</html>
拖拽前的頁(yè)面效果為：
下面分別來(lái)解析下上面代碼的意思。
設(shè)置元素可拖放
首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ：
<img draggable="true">
拖動(dòng)什么 - ondragstart 和 setData()
然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。
在上面的例子中，ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類(lèi)型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個(gè)例子中，數(shù)據(jù)類(lèi)型是 "Text"，值是可拖動(dòng)元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。
默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。
這要通過(guò)調(diào)用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
進(jìn)行放置 - ondrop
當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件。
在上面的例子中，ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋?zhuān)?/p>
- 調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)）
- 通過(guò) dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類(lèi)型的任何數(shù)據(jù)。
- 被拖數(shù)據(jù)是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目標(biāo)元素）中
實(shí)現(xiàn)的結(jié)果如圖：
dataTransfer對(duì)象
在拖曳操作的過(guò)程中，我們可以用過(guò)dataTransfer對(duì)象來(lái)傳輸數(shù)據(jù)，以便在拖曳操作結(jié)束的時(shí)候?qū)?shù)據(jù)進(jìn)行其他的操作。
對(duì)象屬性：
- dropEffect:設(shè)置或返回拖放目標(biāo)上允許發(fā)生的拖放行為。如果此處設(shè)置的拖放行為不再effectAllowed屬性設(shè)置的多種拖放行為之內(nèi)，拖放操作將會(huì)失敗。該屬性值只允許為“null”、“copy”、“link”和“move”四值之一。
- effectAllowed:設(shè)置或返回被拖動(dòng)元素允許發(fā)生的拖動(dòng)行為。該屬性值可設(shè)為“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
- items:該屬性返回DataTransferItems對(duì)象，該對(duì)象代表了拖動(dòng)數(shù)據(jù)。
- types:該屬性返回一個(gè)DOMStringList對(duì)象，該對(duì)象包括了存入dataTransfer中數(shù)據(jù)的所有類(lèi)型。
對(duì)象方法：
- setData(format,data):將指定格式的數(shù)據(jù)賦值給dataTransfer對(duì)象，參數(shù)format定義數(shù)據(jù)的格式也就是數(shù)據(jù)的類(lèi)型，data為待賦值的數(shù)據(jù)
- getData(format):從dataTransfer對(duì)象中獲取指定格式的數(shù)據(jù)，format代表數(shù)據(jù)格式，data為數(shù)據(jù)。
- clearData([format]):從dataTransfer對(duì)象中刪除指定格式的數(shù)據(jù)，參數(shù)可選，若不給出，則為刪除對(duì)象中所有的數(shù)據(jù)。
- addElement(element):添加自定義圖標(biāo)
- setDragImage(element,x,y):設(shè)置拖放操作的自定義圖標(biāo)。其中element設(shè)置自定義圖標(biāo)，x設(shè)置圖標(biāo)與鼠標(biāo)在水平方向上的距離，y設(shè)置圖標(biāo)與鼠標(biāo)在垂直方向上的距離。
Identify what is draggable
function dragstart_handler(ev) {
console.log("dragStart");
// Add the target element's id to the data transfer object
ev.dataTransfer.setData("text/plain", ev.target.id);
}
<body>
<p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>
Define the drag's data
function dragstart_handler(ev) {
// Add the drag data
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}
Define the drag image
function dragstart_handler(ev) {
// Create an image and then use it for the drag image.
// NOTE: change "example.gif" to an existing image or the image
// will not be created and the default drag image will be used.
var img = new Image();
img.src = 'example.gif';
ev.dataTransfer.setDragImage(img, 10, 10);
}
Define the drag effect
function dragstart_handler(ev) {
// Set the drag effect to copy
ev.dataTransfer.dropEffect = "copy";
}
Define a drop zone
function dragover_handler(ev) {
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<body>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
火狐瀏覽器拖拽問(wèn)題
但是進(jìn)行到這兒在火狐瀏覽器中發(fā)現(xiàn)一個(gè)問(wèn)題：
html5的拖拽，用了preventDefault防止彈出新頁(yè)面，但在火狐下不管用？
解決辦法：
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
或者對(duì)于上面的實(shí)例中，添加到ondrop方法里面也是可以的：
function drop(ev){
ev.preventDefault();
ev.stopPropagation();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
5分鐘弄清楚html5的drag and drop(小結(jié))
這篇文章主要介紹了5分鐘弄清楚html5的drag and drop(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2019-04-10- 大家都知道拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。拖放是在“拖放源（drag source）”和“拖放目標(biāo)2016-11-14
HTML5+CSS3實(shí)現(xiàn)拖放(Drag and Drop)示例
這篇文章主要為大家介紹了HTML5+CSS3實(shí)現(xiàn)拖放(Drag and Drop)的實(shí)現(xiàn)方法,需要的朋友可以參考下2014-07-07突襲HTML5之Javascript API擴(kuò)展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是個(gè)非常普遍的功能,可以抓住一個(gè)對(duì)象，并且拖動(dòng)到你想放置的區(qū)域;在HTML5中，拖拽(draganddrop)成為了標(biāo)準(zhǔn)操作，任何元素都支持。正因?yàn)檫@個(gè)功能太普遍了2013-01-31- 這篇文章主要介紹了HTML5 drag和drop具體使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2021-01-18
