溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家詳細(xì)介紹了html5中可拖動dragable屬性及其他成員的講解，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
之前我們已經(jīng)為大家介紹過幾篇有關(guān)HTML5中原生拖拽的相關(guān)知識了。今天為大家介紹HTML5拖拽中的其他一些小東東，閑話不多說趕快一起看看吧。
在默認(rèn)情況下，鏈接、文本和圖像是可以拖動的，不用再寫代碼即可拖動。如果想讓其他元素標(biāo)簽也可以拖動，那么只有HTML5能實現(xiàn)了。HTML5為所有HTML元素規(guī)定了dragable屬性，表示元素是否可以拖動。鏈接和圖像的標(biāo)簽中自動將dragable屬性自動被設(shè)置成true，其他元素的dragable屬性的默認(rèn)值是false。
支持dragable屬性的瀏覽器有：Firefox 4+、Chrome、IE 10+和Safari 5+。Opera 11.5及之前的版本是不支持HTML5的拖放功能。另外能夠讓Firefox支持可拖動屬性必須添加一個ondragstart事件處理程序，并在dataTransfer對象中保存一些信息才可以。在IE 9及更早版本中，通過mousedown事件處理程序調(diào)用dragDrop()方法能夠讓任何元素可以拖動。在Safari 4及更早的版本中，必須額外給相應(yīng)的元素設(shè)置CSS樣式 -khtml-user-drag: element才可以拖動。
之前介紹過有關(guān)dataTransfer對象的一些屬性，但是并不是很全。下面的一些方法和屬性是其中有可能漏掉的屬性和方法。
addElement(element)：為拖動操作添加一個元素。添加這個元素只影響數(shù)據(jù)(即增加作為拖動源而響應(yīng)回調(diào)的對象)，不會影響拖動操作時頁面元素的外觀。直到寫這篇博客的時候，只有Firefox 3.5+實現(xiàn)這種方法了。
clearData(format)：清除以特定格式保存的數(shù)據(jù)。實現(xiàn)這個方法的瀏覽器有Firefox 3.5+、Safari 4+、IE和Safari 4+。
setDragImge(element, x, y)：指定一幅圖像，當(dāng)拖動發(fā)生的時候，顯示在光標(biāo)下方。這個方法接收的參數(shù)有三個分別是：要顯示的HTML元素和光標(biāo)在圖像中的x、y坐標(biāo)。其中，HTML元素可以是一幅圖像，也可以是其他元素。是圖像的話就顯示圖像，是其他元素的話就顯示渲染后的元素。支持的瀏覽器有：Safari 4+、Chrome和Firefox 3.5+。
Types：當(dāng)前保存的數(shù)據(jù)類型。這個是一個類似數(shù)組的集合，以”text”這樣的字符串形式保存著數(shù)據(jù)類型。支持的瀏覽器有：Chrome、Firefox 3.5+和IE 10+。
了解過了一些理論知識，接下來一個小例子讓大家更加加深理解。
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對象 : 連接拖拽細(xì)節(jié)的 ，在event對象下面的
//拖動不帶鏈接的li，會起作用但不跳轉(zhuǎn)鏈接
//拖動帶連接的a，會起作用也跳轉(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'); //存儲一個鍵值對 : 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'); //存儲一個鍵值對 : 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){ //進入目標(biāo)、離開目標(biāo)之間，連續(xù)觸發(fā)
ev.preventDefault(); //阻止默認(rèn)事件：元素就可以釋放了
ev.dataTransfer.dropEffect = 'link'; //真對外部文件
};
op.ondrop = function(ev){ //釋放鼠標(biāo)的時候觸發(fā)
this.style.background = 'red';
alert( ev.dataTransfer.getData('a') );
alert( ev.dataTransfer.types );
};
};HTML代碼
[javascript] view plaincopyprint?
//dataTransfer對象 : 連接拖拽細(xì)節(jié)的 ，在event對象下面的
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){ //進入目標(biāo)、離開目標(biāo)之間，連續(xù)觸發(fā)
ev.preventDefault(); //阻止默認(rèn)事件：元素就可以釋放了
ev.dataTransfer.dropEffect = 'link'; //真對外部文件
};
op.ondrop = function(ev){ //釋放鼠標(biāo)的時候觸發(fā)
ev.preventDefault(); //阻止默認(rèn)行為
this.style.background = 'red';
var oFR = new FileReader();
var list = ev.dataTransfer.files; //當(dāng)前拖拽的那個文件(返回的一個文件列表)
//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">夢龍小站</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對象 : 連接拖拽細(xì)節(jié)的 ，在event對象下面的
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); //存儲一個鍵值對 : 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){ //進入目標(biāo)、離開目標(biāo)之間，連續(xù)觸發(fā)
ev.preventDefault(); //阻止默認(rèn)事件：元素就可以釋放了
};
op.ondrop = function(ev){ //釋放鼠標(biāo)的時候觸發(fā)
this.style.background = 'red';
var oText = ev.dataTransfer.getData('text');
if(targetLi){
targetLi.parentNode.removeChild(targetLi);
this.innerHTML = '刪除的是:'+oText;
}
};
};以上就是html5中可拖動dragable屬性及其他成員的講解的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來億速云行業(yè)資訊。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼