html5中可拖动dragable属性及其他成员的讲解
这篇文章主要为大家详细介绍了html5中可拖动dragable属性及其他成员的讲解,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
创新互联是专业的邕宁网站建设公司,邕宁接单;提供成都网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行邕宁网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
可拖动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(){ //相当于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?梦龙小站
垃圾箱删除小例子
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属性及其他成员的讲解的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来创新互联行业资讯。
分享名称:html5中可拖动dragable属性及其他成员的讲解
网站地址:http://scyanting.com/article/ighhpp.html