JavascriptAPI實例分析

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

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

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

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

啟用拖拽-draggable屬性

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

代碼如下:

<imgdraggable="true"/>

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

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

方法成員：

代碼如下:

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

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

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

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

代碼如下:

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

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

代碼如下:

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

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

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

屬性成員：

代碼如下:

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

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

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

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

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

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

"copyMove"-復制或移動數(shù)據(jù)，由目標對象來確定。

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

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

"none"-禁止拖動。

"uninitialized"-默認值，采用默認的行為。

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

代碼如下:

dropEffect：設置或獲取拖動的目標上允許的操作以及相關的鼠標形狀。

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

"copy"-鼠標顯示為復制時的形狀；

"link"-鼠標顯示為連接的形狀；

"move"-鼠標顯示為移動的形狀。

"none"(默認值)-鼠標顯示為沒有拖動的形狀。

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

代碼如下:

files：返回拖動的文件的列表FileList。

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

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

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

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

代碼如下:

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

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

dragenter：拖拽元素進入目標元素時觸發(fā)，這個事件對象是目標元素。

dragover：拖拽某元素在目標元素上移動時觸發(fā)，這個事件對象是目標元素。

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

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

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

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

拖動開始-ondragstart事件

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

拖動過程中-ondrag，ondragover，ondragenter和ondragleave事件

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

這里只需要注意一點，因為默認情況下，瀏覽器是禁止元素drop的，所以為了讓元素可以drop，需要在這個函數(shù)中返回false或者調用event.preventDefault()方法。如下面的例子所示。

拖動結束-ondrop，ondragend事件

當可拖動的數(shù)據(jù)被drop的時候，drop事件觸發(fā)。drop結束后，dragend事件被觸發(fā)，這個事件使用的也相對少一點。

看一個簡單的例子：

代碼如下:

<!DOCTYPEHTML>

<html>

<head>

<scripttype="text/javascript">

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();

}

</script>

</head>

<body>

<divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div>

<imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/>

</body>

</html>

文件拖拽

上面的例子已經(jīng)使用了dataTransfer的各種方法和屬性，下面再看網(wǎng)上的另外一個有趣的應用：拖拽一個圖片到網(wǎng)頁上，然后在網(wǎng)頁上顯示。這個應用用到了dataTransfer的files屬性。

代碼如下:

<!DOCTYPEHTML>

<html>

<head>

<metacharset="utf-8">

<style>

#section{font-family:"Georgia","微軟雅黑","華文中宋";}

.container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3pxsolid#ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}

.preview{max-width:360px;}

#files-list{position:absolute;top:0;left:500px;}

#list{width:460px;}

#list.preview{max-width:250px;}

#listp{color:#888;font-size:12px;}

#list.green{color:#09c;}

</style>

</head>

<body>

<divid="section">

<p>把你的圖片拖到下面的容器內(nèi)：</p>

<divid="container"class="container">

</div>

<divid="files-list">

<p>已經(jīng)拖進過來的文件：</p>

<ulid="list"></ul>

</div>

if(window.FileReader){

varlist=document.getElementById('list'),

cnt=document.getElementById('container');

//判斷是否圖片

functionisImage(type){

switch(type){

case'image/jpeg':

case'image/png':

case'image/gif':

case'image/bmp':

case'image/jpg':

returntrue;

default:

returnfalse;

}

//處理拖放文件列表

functionhandleFileSelect(evt){

evt.stopPropagation();

evt.preventDefault();

varfiles=evt.dataTransfer.files;

for(vari=0,f;f=files[i];i++){

vart=f.type?f.type:'n/a',

reader=newFileReader(),

looks=function(f,img){

list.innerHTML+='<li><strong>'+f.name+'</strong>('+t+

')-'+f.size+'bytes<p>'+img+'</p></li>';

cnt.innerHTML=img;

isImg=isImage(t),

img;

//處理得到的圖片

if(isImg){

reader.onload=(function(theFile){

returnfunction(e){

img='<imgclass="preview"src="'+e.target.result+'"title="'+theFile.name+'"/>';

looks(theFile,img);

};

})(f)

reader.readAsDataURL(f);

}else{

img='"o((>ω<))o"，你傳進來的不是圖片！！';

looks(f,img);

}

//處理插入拖出效果

functionhandleDragEnter(evt){this.setAttribute('style','border-style:dashed;');}

functionhandleDragLeave(evt){this.setAttribute('style','');}

//處理文件拖入事件，防止瀏覽器默認事件帶來的重定向

functionhandleDragOver(evt){

evt.stopPropagation();

evt.preventDefault();

}

cnt.addEventListener('dragenter',handleDragEnter,false);

cnt.addEventListener('dragover',handleDragOver,false);

cnt.addEventListener('drop',handleFileSelect,false);

cnt.addEventListener('dragleave',handleDragLeave,false);

}else{

document.getElementById('section').innerHTML='你的瀏覽器不支持啊，同學';

}

</script>

</body>

</html>

這個例子中使用了html5中的文件讀取API：FileReader對象；該對象提供了下列異步方法用于讀取文件：

1.FileReader.readAsBinaryString(fileBlob)

以二進制的方式讀取文件，result屬性會包含一個文件的二進制的格式

2.FileReader.readAsText(fileBlob,opt_encoding)

以文本的方式讀取文件，result屬性將會包含一個文件的文本格式，默認解碼參數(shù)是“utf-8”。

3.FileReader.readAsDataURL(file)

以URL形式讀取文件result將會包含一個文件的DataURL格式（圖片通常用這種方式）。

當使用上面的方法讀取文件后，會觸發(fā)下列事件：

代碼如下:

onloadstart，onprogress，onabort，onerror，onload，onloadend

這些事件都很簡單，需要的時候掛接就可以了?？聪旅娴拇a示例：

代碼如下:

functionstartRead(){

//obtaininputelementthroughDOM

varfile=document.getElementById('file').files[0];

if(file){

getAsText(file);

}

functiongetAsText(readFile){

varreader=newFileReader();

//ReadfileintomemoryasUTF-16

reader.readAsText(readFile,"UTF-16");

//Handleprogress,success,anderrors

reader.onprogress=updateProgress;

reader.onload=loaded;

reader.onerror=errorHandler;

}

functionupdateProgress(evt){

if(evt.lengthComputable){

//evt.loadedandevt.totalareProgressEventproperties

varloaded=(evt.loaded/evt.total);

if(loaded<1){

//Increasetheprogbarlength

//style.width=(loaded*200)+"px";

}

functionloaded(evt){

//Obtainthereadfiledata

varfileString=evt.target.result;

//HandleUTF-16filedump

if(utils.regexp.isChinese(fileString)){

//ChineseCharacters+Namevalidation

}

else{

//runothercharsettest

}

//xhr.send(fileString)

}

functionerrorHandler(evt){

if(evt.target.error.name=="NotReadableErr"){

//Thefilecouldnotberead

}

這里也簡單說一下：普通的文件下載使用的就是window.open方法，例如：

代碼如下:

window.open('http://aaa.bbbb.com/ccc.rar','_blank')

關于“Javascript API實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

新聞標題：JavascriptAPI實例分析
文章網(wǎng)址：http://bm7419.com/article42/jcegec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、網(wǎng)站建設、Google、用戶體驗、ChatGPT、外貿(mào)網(wǎng)站建設

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

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