HTML5講解之可拖曳dragable屬性和其他成員
- 巴扎黑原創
- 2017-08-10 10:52:301999瀏覽
[導讀] 可拖曳dragable屬性 之前我們已經為大家介紹過幾篇有關HTML5中原生拖曳的相關知識了。今天為大家介紹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才可以拖曳。
HTML5拖曳其他成員
# 之前介紹過有關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+。
了解過了一些理論知識，接下來一個小例子讓大家更加加深理解。
dragable屬性及其他成員小範例
#
# HTHTML程式碼
[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 );
};
};
JavaScript代碼
[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]);
};
};
# 桌面拖曳到頁面中的小範例
# HTML代碼
[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;}
CSS代碼
[html] view plaincopyprint? <p id="p1">梦龙小站</p>
JavaScript代碼
[html] view plaincopyprint?
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<p id="p1">垃圾箱</p>##
垃圾箱刪除小範例
#
HTML代碼
[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;}
# HTML代碼
[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;
}
};
};CSS程式碼
- rrreee
以上是HTML5講解之可拖曳dragable屬性和其他成員的詳細內容。更多資訊請關注PHP中文網其他相關文章！