這篇文章主要為大家詳細(xì)介紹了html5中可拖動(dòng)dragable屬性及其他成員的講解,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。
創(chuàng)新互聯(lián)是專業(yè)的邕寧網(wǎng)站建設(shè)公司,邕寧接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行邕寧網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
之前我們已經(jīng)為大家介紹過(guò)幾篇有關(guān)HTML5中原生拖拽的相關(guān)知識(shí)了。今天為大家介紹HTML5拖拽中的其他一些小東東,閑話不多說(shuō)趕快一起看看吧。
在默認(rèn)情況下,鏈接、文本和圖像是可以拖動(dòng)的,不用再寫代碼即可拖動(dòng)。如果想讓其他元素標(biāo)簽也可以拖動(dòng),那么只有HTML5能實(shí)現(xiàn)了。HTML5為所有HTML元素規(guī)定了dragable屬性,表示元素是否可以拖動(dòng)。鏈接和圖像的標(biāo)簽中自動(dòng)將dragable屬性自動(dòng)被設(shè)置成true,其他元素的dragable屬性的默認(rèn)值是false。
支持dragable屬性的瀏覽器有:Firefox 4+、Chrome、IE 10+和Safari 5+。Opera 11.5及之前的版本是不支持HTML5的拖放功能。另外能夠讓Firefox支持可拖動(dòng)屬性必須添加一個(gè)ondragstart事件處理程序,并在dataTransfer對(duì)象中保存一些信息才可以。在IE 9及更早版本中,通過(guò)mousedown事件處理程序調(diào)用dragDrop()方法能夠讓任何元素可以拖動(dòng)。在Safari 4及更早的版本中,必須額外給相應(yīng)的元素設(shè)置CSS樣式 -khtml-user-drag: element才可以拖動(dòng)。
之前介紹過(guò)有關(guān)dataTransfer對(duì)象的一些屬性,但是并不是很全。下面的一些方法和屬性是其中有可能漏掉的屬性和方法。
addElement(element):為拖動(dòng)操作添加一個(gè)元素。添加這個(gè)元素只影響數(shù)據(jù)(即增加作為拖動(dòng)源而響應(yīng)回調(diào)的對(duì)象),不會(huì)影響拖動(dòng)操作時(shí)頁(yè)面元素的外觀。直到寫這篇博客的時(shí)候,只有Firefox 3.5+實(shí)現(xiàn)這種方法了。
clearData(format):清除以特定格式保存的數(shù)據(jù)。實(shí)現(xiàn)這個(gè)方法的瀏覽器有Firefox 3.5+、Safari 4+、IE和Safari 4+。
setDragImge(element, x, y):指定一幅圖像,當(dāng)拖動(dòng)發(fā)生的時(shí)候,顯示在光標(biāo)下方。這個(gè)方法接收的參數(shù)有三個(gè)分別是:要顯示的HTML元素和光標(biāo)在圖像中的x、y坐標(biāo)。其中,HTML元素可以是一幅圖像,也可以是其他元素。是圖像的話就顯示圖像,是其他元素的話就顯示渲染后的元素。支持的瀏覽器有:Safari 4+、Chrome和Firefox 3.5+。
Types:當(dāng)前保存的數(shù)據(jù)類型。這個(gè)是一個(gè)類似數(shù)組的集合,以”text”這樣的字符串形式保存著數(shù)據(jù)類型。支持的瀏覽器有:Chrome、Firefox 3.5+和IE 10+。
了解過(guò)了一些理論知識(shí),接下來(lái)一個(gè)小例子讓大家更加加深理解。
HTML代碼
[html] view plaincopyprint? <ul> <li draggable="true">a</li> <li draggable="true">b</li> <li draggable="false">c</li> </ul> <a href="http://www.baidu.com/">d</a> <p id="p1"></p>
CSS代碼
[css] view plaincopyprint? li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} #p1{ width:100px; height:100px; background:red; margin:300px;}
JavaScript代碼
[javascript] view plaincopyprint? //dataTransfer對(duì)象 : 連接拖拽細(xì)節(jié)的 ,在event對(duì)象下面的 //拖動(dòng)不帶鏈接的li,會(huì)起作用但不跳轉(zhuǎn)鏈接 //拖動(dòng)帶連接的a,會(huì)起作用也跳轉(zhuǎn) window.onload = function(){ var aLi = document.getElementsByTagName('li'); var aA = document.getElementsByTagName('a'); var op = document.getElementById('p1'); for(var i=0;i<aLi.length;i++){ aLi[i].ondragstart = function(ev){ //拖拽前觸發(fā) this.style.background = 'yellow'; ev.dataTransfer.setData('a','hello'); //存儲(chǔ)一個(gè)鍵值對(duì) : value值必須是字符串 ev.dataTransfer.effectAllowed = 'all'; ev.dataTransfer.setDragImage(this,0,0); }; aLi[i].ondragend = function(){ //拖拽結(jié)束觸發(fā) this.style.background = ''; }; } for(var i=0;i<aA.length;i++){ aA[i].ondragstart = function(ev){ //拖拽前觸發(fā) this.style.background = 'yellow'; ev.dataTransfer.setData('a','hello'); //存儲(chǔ)一個(gè)鍵值對(duì) : value值必須是字符串 ev.dataTransfer.effectAllowed = 'link'; }; aA[i].ondragend = function(){ //拖拽結(jié)束觸發(fā) this.style.background = ''; }; } op.ondragenter = function(){ //相當(dāng)于onmouseover this.style.background = 'green'; }; op.ondragleave = function(){ //相當(dāng)于onmouseout this.style.background = 'red'; }; op.ondragover = function(ev){ //進(jìn)入目標(biāo)、離開(kāi)目標(biāo)之間,連續(xù)觸發(fā) ev.preventDefault(); //阻止默認(rèn)事件:元素就可以釋放了 ev.dataTransfer.dropEffect = 'link'; //真對(duì)外部文件 }; op.ondrop = function(ev){ //釋放鼠標(biāo)的時(shí)候觸發(fā) this.style.background = 'red'; alert( ev.dataTransfer.getData('a') ); alert( ev.dataTransfer.types ); }; };
HTML代碼
[javascript] view plaincopyprint? //dataTransfer對(duì)象 : 連接拖拽細(xì)節(jié)的 ,在event對(duì)象下面的 window.onload = function(){ var op = document.getElementById('p1'); op.ondragenter = function(){ //相當(dāng)于onmouseover this.style.background = 'green'; }; op.ondragleave = function(){ //相當(dāng)于onmouseout this.style.background = 'red'; }; op.ondragover = function(ev){ //進(jìn)入目標(biāo)、離開(kāi)目標(biāo)之間,連續(xù)觸發(fā) ev.preventDefault(); //阻止默認(rèn)事件:元素就可以釋放了 ev.dataTransfer.dropEffect = 'link'; //真對(duì)外部文件 }; op.ondrop = function(ev){ //釋放鼠標(biāo)的時(shí)候觸發(fā) ev.preventDefault(); //阻止默認(rèn)行為 this.style.background = 'red'; var oFR = new FileReader(); var list = ev.dataTransfer.files; //當(dāng)前拖拽的那個(gè)文件(返回的一個(gè)文件列表) //alert(list.length); //type : 文件類型 //alert(list[0].type); oFR.onload = function(){ //讀取完成,觸發(fā)事件 alert(this.result); // 讀取到的信息 }; oFR.readAsDataURL(list[0]); }; };
CSS代碼
[css] view plaincopyprint? li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} #p1{ width:100px; height:100px; background:red; margin:300px;}
JavaScript代碼
[html] view plaincopyprint? <p id="p1">夢(mèng)龍小站</p>
垃圾箱刪除小例子
HTML代碼
[html] view plaincopyprint? <ul> <li draggable="true">a</li> <li draggable="true">b</li> <li draggable="true">c</li> </ul> <p id="p1">垃圾箱</p>
CSS代碼
[css] view plaincopyprint? li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} #p1{ width:100px; height:100px; background:red; margin:300px; color:white;}
JavaScript代碼
[javascript] view plaincopyprint? //dataTransfer對(duì)象 : 連接拖拽細(xì)節(jié)的 ,在event對(duì)象下面的 window.onload = function(){ var aLi = document.getElementsByTagName('li'); var op = document.getElementById('p1'); var iNow = 0; var targetLi = null; for(var i=0;i<aLi.length;i++){ aLi[i].ondragstart = function(ev){ //拖拽前觸發(fā) this.style.background = 'yellow'; ev.dataTransfer.setData('text',this.innerHTML); //存儲(chǔ)一個(gè)鍵值對(duì) : value值必須是字符串 targetLi = this; }; aLi[i].ondragend = function(){ //拖拽結(jié)束觸發(fā) this.style.background = ''; }; } op.ondragenter = function(){ //相當(dāng)于onmouseover this.style.background = 'green'; }; op.ondragleave = function(){ //相當(dāng)于onmouseout this.style.background = 'red'; }; op.ondragover = function(ev){ //進(jìn)入目標(biāo)、離開(kāi)目標(biāo)之間,連續(xù)觸發(fā) ev.preventDefault(); //阻止默認(rèn)事件:元素就可以釋放了 }; op.ondrop = function(ev){ //釋放鼠標(biāo)的時(shí)候觸發(fā) this.style.background = 'red'; var oText = ev.dataTransfer.getData('text'); if(targetLi){ targetLi.parentNode.removeChild(targetLi); this.innerHTML = '刪除的是:'+oText; } }; };
以上就是html5中可拖動(dòng)dragable屬性及其他成員的講解的詳細(xì)內(nèi)容了,看完之后是否有所收獲呢?如果想了解更多相關(guān)內(nèi)容,歡迎來(lái)創(chuàng)新互聯(lián)行業(yè)資訊。
網(wǎng)站欄目:html5中可拖動(dòng)dragable屬性及其他成員的講解
瀏覽地址:http://muchs.cn/article38/ighhpp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名、靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)