突襲HTML5之Javascript API擴(kuò)展4—拖拽(Drag/Drop)概述_HTML5教程
推薦：html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)webkit特有的一個(gè)css，可以控制里面的文字樣式，配合css3的動(dòng)畫(huà)效果和偽類(lèi)，我們就可以很容易做出一個(gè)帶動(dòng)畫(huà)的輸入框，在系統(tǒng)登錄、搜索等位置很適合，感興趣的你可以參考下本文或許可以幫助到你
拖拽(Drag/Drop)是個(gè)非常普遍的功能。你可以抓住一個(gè)對(duì)象，并且拖動(dòng)到你想放置的區(qū)域。很多javascript都類(lèi)似實(shí)現(xiàn)了相關(guān)的功能，例如，jQueryUI的draganddrop組件。在HTML5中，拖拽(draganddrop)成為了標(biāo)準(zhǔn)操作，任何元素都支持。正因?yàn)檫@個(gè)功能太普遍了，所有的主流瀏覽器都支持這個(gè)操作。啟用拖拽-draggable屬性
非常簡(jiǎn)單，只需要將一個(gè)元素的拖動(dòng)屬性修改為draggable，這個(gè)元素就支持拖動(dòng)了，如下所示：
復(fù)制代碼 代碼如下:m.ghpqjb.com
<imgdraggable="true"/>
拖動(dòng)中數(shù)據(jù)的傳遞
拖動(dòng)的過(guò)程中，我們往往需要傳遞相應(yīng)的邏輯數(shù)據(jù)來(lái)完成轉(zhuǎn)換的過(guò)程，這里主要是使用dataTransfer對(duì)象進(jìn)行數(shù)據(jù)傳遞，下面先看看它的成員：
方法成員：
復(fù)制代碼 代碼如下:m.ghpqjb.com
setData(format,data)：把被拖動(dòng)的數(shù)據(jù)賦值給dataTransfer對(duì)象。
format:一個(gè)String型參數(shù)，指定被拖動(dòng)數(shù)據(jù)的類(lèi)型。該參數(shù)取值可以是“Text”(文本類(lèi)型)和“URL”(URL類(lèi)型)。該參數(shù)是大小寫(xiě)無(wú)關(guān)的，所以傳入"text"與"Text"是一樣的。
data:一個(gè)變體類(lèi)型參數(shù)，指定被拖動(dòng)的數(shù)據(jù)。該數(shù)據(jù)可以是文本，圖片路徑，URL等等。
該函數(shù)有Boolean類(lèi)型的返回值，true表示數(shù)據(jù)成功加到dataTransfer中，false代表不成功。如果需要，可以通過(guò)這個(gè)參數(shù)來(lái)決定是否應(yīng)該繼續(xù)執(zhí)行某些邏輯。
復(fù)制代碼 代碼如下:m.ghpqjb.com
getData(format)：獲取dataTransfer中存放的拖動(dòng)數(shù)據(jù)。
format意義與setData中的一樣，取值可以是"Text"(文本類(lèi)型)和"URL"(URL類(lèi)型)。
復(fù)制代碼 代碼如下:m.ghpqjb.com
clearData(format)：移除指定類(lèi)型的數(shù)據(jù)。
這里的format除了上面可以指定的"Text"(文本類(lèi)型)和"URL"(URL類(lèi)型)外，還可以取下列值：file-文件，html-html元素，image-圖片。
這個(gè)方法可以用于去選擇性的處理拖動(dòng)的數(shù)據(jù)類(lèi)型。
屬性成員：
復(fù)制代碼 代碼如下:m.ghpqjb.com
effectAllowed：設(shè)置或獲取數(shù)據(jù)源元素中的數(shù)據(jù)可以執(zhí)行的操作。
屬性類(lèi)型為字符串，取值范圍如下：
"copy"-復(fù)制數(shù)據(jù).
"link"-鏈接數(shù)據(jù).
"move"-移動(dòng)數(shù)據(jù)
"copyLink"-復(fù)制或鏈接數(shù)據(jù)，由目標(biāo)對(duì)象來(lái)確定。
"copyMove"-復(fù)制或移動(dòng)數(shù)據(jù)，由目標(biāo)對(duì)象來(lái)確定。
"linkMove"-鏈接或移動(dòng)數(shù)據(jù)，由目標(biāo)對(duì)象來(lái)確定。
"all"-所有的操作都是支持的。
"none"-禁止拖動(dòng)。
"uninitialized"-默認(rèn)值，采用默認(rèn)的行為。
注意設(shè)置effectAllowed為none以后，拖動(dòng)是禁止的，但是鼠標(biāo)形狀還是顯示沒(méi)有可拖動(dòng)的對(duì)象的形狀，如果想不顯示這個(gè)鼠標(biāo)形狀，則需要將window的event事件的屬性returnValue設(shè)置為false。
復(fù)制代碼 代碼如下:m.ghpqjb.com
dropEffect：設(shè)置或獲取拖動(dòng)的目標(biāo)上允許的操作以及相關(guān)的鼠標(biāo)形狀。
屬性類(lèi)型為字符串，取值范圍如下：
"copy"-鼠標(biāo)顯示為復(fù)制時(shí)的形狀；
"link"-鼠標(biāo)顯示為連接的形狀；
"move"-鼠標(biāo)顯示為移動(dòng)的形狀。
"none"(默認(rèn)值)-鼠標(biāo)顯示為沒(méi)有拖動(dòng)的形狀。
effectAllowed指定了數(shù)據(jù)源支持的操作，所以通常在ondragstart事件中指定。dropEffect指定了拖動(dòng)放置的目標(biāo)支持的操作，所以與effectAllowed配合，通常在拖動(dòng)的目標(biāo)上的ondragenter,ondragover和ondrop等事件中使用。
復(fù)制代碼 代碼如下:m.ghpqjb.com
files：返回拖動(dòng)的文件的列表FileList。
types：ondragstart中發(fā)送的數(shù)據(jù)(被拖動(dòng)的數(shù)據(jù))類(lèi)型的列表。
dataTransfer對(duì)象的存在，使得在拖動(dòng)的數(shù)據(jù)源和目標(biāo)元素之間傳遞邏輯數(shù)據(jù)變成了可能。通常我們使用setData方法在數(shù)據(jù)源元素的ondragstart事件中提供數(shù)據(jù)，然后再目標(biāo)元素中，使用getData方法獲取數(shù)據(jù)。
拖動(dòng)中觸發(fā)的事件
下面是一次拖拽會(huì)發(fā)生的事件，基本上事件的觸發(fā)順序也就是下面的順序：
復(fù)制代碼 代碼如下:m.ghpqjb.com
dragstart：要被拖拽的元素開(kāi)始拖拽時(shí)觸發(fā)，這個(gè)事件對(duì)象是被拖拽元素。
drag:拖拽元素時(shí)觸發(fā)，這個(gè)事件對(duì)象是被拖拽元素。
dragenter：拖拽元素進(jìn)入目標(biāo)元素時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素。
dragover：拖拽某元素在目標(biāo)元素上移動(dòng)時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素。
dragleave：拖拽某元素離開(kāi)目標(biāo)元素時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素。
drop：將被拖拽元素放在目標(biāo)元素內(nèi)時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素。
dragend：在drop之后觸發(fā)，就是拖拽完畢時(shí)觸發(fā)，這個(gè)事件對(duì)象是被拖拽元素。
基本上事件的參數(shù)event都會(huì)傳入相關(guān)的元素，可以很方便的進(jìn)行一些修改。這里，我們并不需要處理每個(gè)事件，通常只需要掛接主要的幾個(gè)事件即可。
拖動(dòng)開(kāi)始-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)過(guò)程中-ondrag，ondragover，ondragenter和ondragleave事件
ondrag事件的對(duì)象是被拖拽元素，通常這個(gè)事件處理的比較少。ondragenter事件是當(dāng)拖動(dòng)進(jìn)入當(dāng)前元素時(shí)發(fā)生，ondragleave事件是在當(dāng)拖動(dòng)離開(kāi)當(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è)事件使用的也相對(duì)少一點(diǎn)。
看一個(gè)簡(jiǎn)單的例子：
復(fù)制代碼 代碼如下:m.ghpqjb.com
<!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)上的另外一個(gè)有趣的應(yīng)用：拖拽一個(gè)圖片到網(wǎng)頁(yè)上，然后在網(wǎng)頁(yè)上顯示。這個(gè)應(yīng)用用到了dataTransfer的files屬性。
復(fù)制代碼 代碼如下:m.ghpqjb.com
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>HTML5拖放文件</title>
<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)拖進(jìn)過(guò)來(lái)的文件：</p>
<ulid="list"></ul>
</div>
</div>
<script>
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"，你傳進(jìn)來(lái)的不是圖片！！';
looks(f,img);
}
}
}
//處理插入拖出效果
functionhandleDragEnter(evt){this.setAttribute('style','border-style:dashed;');}
functionhandleDragLeave(evt){this.setAttribute('style','');}
//處理文件拖入事件，防止瀏覽器默認(rèn)事件帶來(lái)的重定向
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='你的瀏覽器不支持啊，同學(xué)';
}
</script>
</body>
</html>
這個(gè)例子中使用了html5中的文件讀取API：FileReader對(duì)象；該對(duì)象提供了下列異步方法用于讀取文件：
1.FileReader.readAsBinaryString(fileBlob)
以二進(jìn)制的方式讀取文件，result屬性會(huì)包含一個(gè)文件的二進(jìn)制的格式
2.FileReader.readAsText(fileBlob,opt_encoding)
以文本的方式讀取文件，result屬性將會(huì)包含一個(gè)文件的文本格式，默認(rèn)解碼參數(shù)是“utf-8”。
3.FileReader.readAsDataURL(file)
以URL形式讀取文件result將會(huì)包含一個(gè)文件的DataURL格式（圖片通常用這種方式）。
當(dāng)使用上面的方法讀取文件后，會(huì)觸發(fā)下列事件：
復(fù)制代碼 代碼如下:m.ghpqjb.com
onloadstart，onprogress，onabort，onerror，onload，onloadend
這些事件都很簡(jiǎn)單，需要的時(shí)候掛接就可以了。看下面的代碼示例：
復(fù)制代碼 代碼如下:m.ghpqjb.com
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
}
}
這里也簡(jiǎn)單說(shuō)一下：普通的文件下載使用的就是window.open方法，例如：
復(fù)制代碼 代碼如下:m.ghpqjb.com
window.open('http://aaa.bbbb.com/ccc.rar','_blank')
實(shí)用參考：
官方文檔：http://www.w3schools.com/html5/
一個(gè)不錯(cuò)的教程網(wǎng)站:http://html5.phphubei.com/html5/features/DrapAndDrop/
MSDN幫助：http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
文件拖拽詳述：http://www.html5rocks.com/zh/tutorials/file/dndfiles/
文件拖拽并上傳：http://www.chinaz.com/design/2010/0909/131984.shtml
文件拖拽上傳完整例子：http://www.cnblogs.com/liaofeng/archive/2011/05/18/2049928.html
文件下載的例子：http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
window.open攻略：http://www.cnblogs.com/liulf/archive/2010/03/01/1675511.html
window.open參數(shù)：http://www.koyoz.com/blog/?action=show&id=176
分享：程序設(shè)計(jì)HTML5 Canvas API本文小編為大家介紹關(guān)于程序設(shè)計(jì)程序設(shè)計(jì)HTML5 Canvas API ，有需求的朋友可以參考一下。
相關(guān)HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類(lèi)型和email類(lèi)型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5-websocket基于遠(yuǎn)程方法調(diào)用的數(shù)據(jù)交互實(shí)現(xiàn)
- HTML5自定義data-* data(obj)屬性和jquery的data()方法的使用
- HTML5之SVG 2D入門(mén)12—SVG DOM及DOM操作介紹
- 在IE6系列等老式瀏覽器中使用HTML5的新標(biāo)簽實(shí)現(xiàn)方案
- HTML5中Canvas與SVG的畫(huà)圖原理比較
- 程序設(shè)計(jì)HTML5 Canvas API
- html5 Canvas畫(huà)圖教程(8)—canvas里畫(huà)曲線(xiàn)之bezierCurveTo方法
- HTML5之SVG 2D入門(mén)3—文本與圖像及渲染文本介紹
- input元素的url類(lèi)型和email類(lèi)型簡(jiǎn)介
- html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)
- 相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索突襲HTML5之Javascript API擴(kuò)展4—拖拽(Drag/Drop)概述
- 教程說(shuō)明：
HTML5教程-突襲HTML5之Javascript API擴(kuò)展4—拖拽(Drag/Drop)概述
。