這篇文章主要介紹“Javascript  API實(shí)例分析”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“Javascript  API實(shí)例分析”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、網(wǎng)站制作、貴州網(wǎng)絡(luò)推廣、小程序定制開發(fā)、貴州網(wǎng)絡(luò)營銷、貴州企業(yè)策劃、貴州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供貴州建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

拖拽(Drag/Drop)是個(gè)非常普遍的功能,可以抓住一個(gè)對象，并且拖動(dòng)到你想放置的區(qū)域;在HTML5中，拖拽(draganddrop)成為了標(biāo)準(zhǔn)操作，任何元素都支持。正因?yàn)檫@個(gè)功能太普遍了，所有的主流瀏覽器都支持這個(gè)操作,感興趣的朋友可以了解下，或許對你有所幫助

拖拽(Drag/Drop)是個(gè)非常普遍的功能。你可以抓住一個(gè)對象，并且拖動(dòng)到你想放置的區(qū)域。很多javascript都類似實(shí)現(xiàn)了相關(guān)的功能，例如，jQueryUI的draganddrop組件。在HTML5中，拖拽(draganddrop)成為了標(biāo)準(zhǔn)操作，任何元素都支持。正因?yàn)檫@個(gè)功能太普遍了，所有的主流瀏覽器都支持這個(gè)操作。

啟用拖拽-draggable屬性

非常簡單，只需要將一個(gè)元素的拖動(dòng)屬性修改為draggable，這個(gè)元素就支持拖動(dòng)了，如下所示：

代碼如下:

拖動(dòng)中數(shù)據(jù)的傳遞

拖動(dòng)的過程中，我們往往需要傳遞相應(yīng)的邏輯數(shù)據(jù)來完成轉(zhuǎn)換的過程，這里主要是使用dataTransfer對象進(jìn)行數(shù)據(jù)傳遞，下面先看看它的成員：

方法成員：

代碼如下:

setData(format,data)：把被拖動(dòng)的數(shù)據(jù)賦值給dataTransfer對象。

format:一個(gè)String型參數(shù)，指定被拖動(dòng)數(shù)據(jù)的類型。該參數(shù)取值可以是“Text”(文本類型)和“URL”(URL類型)。該參數(shù)是大小寫無關(guān)的，所以傳入"text"與"Text"是一樣的。

data:一個(gè)變體類型參數(shù)，指定被拖動(dòng)的數(shù)據(jù)。該數(shù)據(jù)可以是文本，圖片路徑，URL等等。

該函數(shù)有Boolean類型的返回值，true表示數(shù)據(jù)成功加到dataTransfer中，false代表不成功。如果需要，可以通過這個(gè)參數(shù)來決定是否應(yīng)該繼續(xù)執(zhí)行某些邏輯。

代碼如下:

getData(format)：獲取dataTransfer中存放的拖動(dòng)數(shù)據(jù)。

format意義與setData中的一樣，取值可以是"Text"(文本類型)和"URL"(URL類型)。

代碼如下:

clearData(format)：移除指定類型的數(shù)據(jù)。

這里的format除了上面可以指定的"Text"(文本類型)和"URL"(URL類型)外，還可以取下列值：file-文件，html-html元素，image-圖片。

這個(gè)方法可以用于去選擇性的處理拖動(dòng)的數(shù)據(jù)類型。

屬性成員：

代碼如下:

effectAllowed：設(shè)置或獲取數(shù)據(jù)源元素中的數(shù)據(jù)可以執(zhí)行的操作。

屬性類型為字符串，取值范圍如下：

"copy"-復(fù)制數(shù)據(jù).

"link"-鏈接數(shù)據(jù).

"move"-移動(dòng)數(shù)據(jù)

"copyLink"-復(fù)制或鏈接數(shù)據(jù)，由目標(biāo)對象來確定。

"copyMove"-復(fù)制或移動(dòng)數(shù)據(jù)，由目標(biāo)對象來確定。

"linkMove"-鏈接或移動(dòng)數(shù)據(jù)，由目標(biāo)對象來確定。

"all"-所有的操作都是支持的。

"none"-禁止拖動(dòng)。

"uninitialized"-默認(rèn)值，采用默認(rèn)的行為。

注意設(shè)置effectAllowed為none以后，拖動(dòng)是禁止的，但是鼠標(biāo)形狀還是顯示沒有可拖動(dòng)的對象的形狀，如果想不顯示這個(gè)鼠標(biāo)形狀，則需要將window的event事件的屬性returnValue設(shè)置為false。

代碼如下:

dropEffect：設(shè)置或獲取拖動(dòng)的目標(biāo)上允許的操作以及相關(guān)的鼠標(biāo)形狀。

屬性類型為字符串，取值范圍如下：

"copy"-鼠標(biāo)顯示為復(fù)制時(shí)的形狀；

"link"-鼠標(biāo)顯示為連接的形狀；

"move"-鼠標(biāo)顯示為移動(dòng)的形狀。

"none"(默認(rèn)值)-鼠標(biāo)顯示為沒有拖動(dòng)的形狀。

effectAllowed指定了數(shù)據(jù)源支持的操作，所以通常在ondragstart事件中指定。dropEffect指定了拖動(dòng)放置的目標(biāo)支持的操作，所以與effectAllowed配合，通常在拖動(dòng)的目標(biāo)上的ondragenter,ondragover和ondrop等事件中使用。

代碼如下:

files：返回拖動(dòng)的文件的列表FileList。

types：ondragstart中發(fā)送的數(shù)據(jù)(被拖動(dòng)的數(shù)據(jù))類型的列表。

dataTransfer對象的存在，使得在拖動(dòng)的數(shù)據(jù)源和目標(biāo)元素之間傳遞邏輯數(shù)據(jù)變成了可能。通常我們使用setData方法在數(shù)據(jù)源元素的ondragstart事件中提供數(shù)據(jù)，然后再目標(biāo)元素中，使用getData方法獲取數(shù)據(jù)。

拖動(dòng)中觸發(fā)的事件

下面是一次拖拽會發(fā)生的事件，基本上事件的觸發(fā)順序也就是下面的順序：

代碼如下:

dragstart：要被拖拽的元素開始拖拽時(shí)觸發(fā)，這個(gè)事件對象是被拖拽元素。

drag:拖拽元素時(shí)觸發(fā)，這個(gè)事件對象是被拖拽元素。

dragenter：拖拽元素進(jìn)入目標(biāo)元素時(shí)觸發(fā)，這個(gè)事件對象是目標(biāo)元素。

dragover：拖拽某元素在目標(biāo)元素上移動(dòng)時(shí)觸發(fā)，這個(gè)事件對象是目標(biāo)元素。

dragleave：拖拽某元素離開目標(biāo)元素時(shí)觸發(fā)，這個(gè)事件對象是目標(biāo)元素。

drop：將被拖拽元素放在目標(biāo)元素內(nèi)時(shí)觸發(fā)，這個(gè)事件對象是目標(biāo)元素。

dragend：在drop之后觸發(fā)，就是拖拽完畢時(shí)觸發(fā)，這個(gè)事件對象是被拖拽元素。

基本上事件的參數(shù)event都會傳入相關(guān)的元素，可以很方便的進(jìn)行一些修改。這里，我們并不需要處理每個(gè)事件，通常只需要掛接主要的幾個(gè)事件即可。

拖動(dòng)開始-ondragstart事件

從這個(gè)事件傳入的參數(shù)含有的信息非常豐富，從中可以很方便的獲取到被拖動(dòng)的元素(event.Target)；從中可以設(shè)置被拖動(dòng)數(shù)據(jù)(event.dataTransfer.setData)；所以你可以很方便實(shí)現(xiàn)拖動(dòng)的背后邏輯(當(dāng)然你綁定的時(shí)候也可以傳遞其他的參數(shù))。

拖動(dòng)過程中-ondrag，ondragover，ondragenter和ondragleave事件

ondrag事件的對象是被拖拽元素，通常這個(gè)事件處理的比較少。ondragenter事件是當(dāng)拖動(dòng)進(jìn)入當(dāng)前元素時(shí)發(fā)生，ondragleave事件是在當(dāng)拖動(dòng)離開當(dāng)前元素時(shí)發(fā)生，ondragover事件是在拖動(dòng)在當(dāng)前元素中移動(dòng)時(shí)發(fā)生。

這里只需要注意一點(diǎn)，因?yàn)槟J(rèn)情況下，瀏覽器是禁止元素drop的，所以為了讓元素可以drop，需要在這個(gè)函數(shù)中返回false或者調(diào)用event.preventDefault()方法。如下面的例子所示。

拖動(dòng)結(jié)束-ondrop，ondragend事件

當(dāng)可拖動(dòng)的數(shù)據(jù)被drop的時(shí)候，drop事件觸發(fā)。drop結(jié)束后，dragend事件被觸發(fā)，這個(gè)事件使用的也相對少一點(diǎn)。

看一個(gè)簡單的例子：

代碼如下:

functionallowDrop(ev){

ev.preventDefault();

}

functiondrag(ev){

ev.dataTransfer.setData("Text",ev.target.id);

}

functiondrop(ev){

vardata=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}