什么是H5的Drag與Drop-創(chuàng)新互聯(lián)

什么是H5的Drag與Drop？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)IDC提供業(yè)務(wù):雙線服務(wù)器托管,成都服務(wù)器租用,雙線服務(wù)器托管,重慶服務(wù)器租用等四川省內(nèi)主機托管與主機租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機房,BGP機房,電信機房,移動機房,聯(lián)通機房。

簡介

拖放是一種常見的特性，即抓取對象以后拖到另一個位置。

在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

先點擊一個小例子：在用戶開始拖動 <p> 元素時執(zhí)行 JavaScript

<p draggable="true" ondragstart="myFunction(event)">拖動我!</p>

提示：鏈接和圖片默認是可拖動的，不需要 draggable 屬性。

定義和用法

在拖放的過程中會觸發(fā)以下事件：

在拖動目標上觸發(fā)事件 (源元素): ondragstart - 用戶開始拖動元素時觸發(fā)

ondrag - 元素正在拖動時觸發(fā)
ondragend - 用戶完成元素拖動后觸發(fā)

釋放目標時觸發(fā)的事件: ondragenter - 當被鼠標拖動的對象進入其容器范圍內(nèi)時觸發(fā)此事件

ondragover - 當某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件
ondragleave - 當被鼠標拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件
ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發(fā)此事件

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。

注意:Safari 5.1.2不支持拖動；在拖動元素時，每隔 350 毫秒會觸發(fā) ondragover 事件。

實例

先貼代碼，再逐一解釋：

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖動img_w3slogo.gif圖片到矩形框中:</p>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<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>

拖拽前的頁面效果為：

什么是H5的Drag與Drop

下面分別來解析下上面代碼的意思。

設(shè)置元素可拖放

首先，為了使元素可拖動，把 draggable 屬性設(shè)置為 true ：

<img draggable="true">

拖動什么 - ondragstart 和 setData()

然后，規(guī)定當元素被拖動時，會發(fā)生什么。

在上面的例子中，ondragstart 屬性調(diào)用了一個函數(shù)，drag(event)，它規(guī)定了被拖動的數(shù)據(jù)。

dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

在這個例子中，數(shù)據(jù)類型是 "Text"，值是可拖動元素的 id ("drag1")。

放到何處 - ondragover

ondragover 事件規(guī)定在何處放置被拖動的數(shù)據(jù)。

默認地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認處理方式。

這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

進行放置 - ondrop

當放置被拖數(shù)據(jù)時，會發(fā)生 drop 事件。

在上面的例子中，ondrop 屬性調(diào)用了一個函數(shù)，drop(event)：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

代碼解釋：

調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中

實現(xiàn)的結(jié)果如圖：

什么是H5的Drag與Drop

dataTransfer對象

在拖曳操作的過程中，我們可以用過dataTransfer對象來傳輸數(shù)據(jù)，以便在拖曳操作結(jié)束的時候?qū)?shù)據(jù)進行其他的操作。

對象屬性：

dropEffect:設(shè)置或返回拖放目標上允許發(fā)生的拖放行為。如果此處設(shè)置的拖放行為不再effectAllowed屬性設(shè)置的多種拖放行為之內(nèi)，拖放操作將會失敗。該屬性值只允許為“null”、“copy”、“l(fā)ink”和“move”四值之一。
effectAllowed:設(shè)置或返回被拖動元素允許發(fā)生的拖動行為。該屬性值可設(shè)為“none”、“copy”、“copyLink”、“copyMove”、“l(fā)ink”、“l(fā)inkMove”、“move”、“all”和“uninitialized”。
items:該屬性返回DataTransferItems對象，該對象代表了拖動數(shù)據(jù)。
types:該屬性返回一個DOMStringList對象，該對象包括了存入dataTransfer中數(shù)據(jù)的所有類型。

對象方法：

setData(format,data):將指定格式的數(shù)據(jù)賦值給dataTransfer對象，參數(shù)format定義數(shù)據(jù)的格式也就是數(shù)據(jù)的類型，data為待賦值的數(shù)據(jù)
getData(format):從dataTransfer對象中獲取指定格式的數(shù)據(jù)，format代表數(shù)據(jù)格式，data為數(shù)據(jù)。
clearData([format]):從dataTransfer對象中刪除指定格式的數(shù)據(jù)，參數(shù)可選，若不給出，則為刪除對象中所有的數(shù)據(jù)。
addElement(element):添加自定義圖標
setDragImage(element,x,y):設(shè)置拖放操作的自定義圖標。其中element設(shè)置自定義圖標，x設(shè)置圖標與鼠標在水平方向上的距離，y設(shè)置圖標與鼠標在垂直方向上的距離。

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>
 <p id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</p>
</body>

火狐瀏覽器拖拽問題

但是進行到這兒在火狐瀏覽器中發(fā)現(xiàn)一個問題：

html5的拖拽，用了preventDefault防止彈出新頁面，但在火狐下不管用？

解決辦法：

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
}

或者對于上面的實例中，添加到ondrop方法里面也是可以的：

function drop(ev){
    ev.preventDefault();
    ev.stopPropagation();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

看完上述內(nèi)容，你們掌握什么是H5的Drag與Drop的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：什么是H5的Drag與Drop-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://bm7419.com/article40/gideo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、建站公司、響應(yīng)式網(wǎng)站、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容