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