HTML5解说之可拖动dragable属性和其他成员-
可拖动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属性及其他成员小例子
HTML代码
[html] view plaincopyprint?
- a
- b
- c
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
桌面拖拽到页面中的小例子
HTML代码
[javascript] view plaincopyprint?
//dataTransfer对象 : 连贯拖拽细节的 ，在event对象下面的
window.onload = function(){
var op = document.getElementById('p1');
op.ondragenter = function(){ //相当于onmou搜索引擎优化ver
this.style.background = 'green';
};
op.ondragleave = function(){ //相当于onmou搜索引擎优化ut
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?
梦龙小站
垃圾箱删除小例子
HTML代码
[html] view plaincopyprint?
- a
- b
- c
垃圾箱
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
以上就是HTML5解说之可拖动dragable属性和其他成员的细致内容，更多请关注 百分百源码网 其它相干文章！
