可拖动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代码

  1. <ul>
  2. <li draggable="true">a</li>
  3. <li draggable="true">b</li>
  4. <li draggable="false">c</li>
  5. </ul>
  6. <a href="http://www.baidu.com/">d</a>
  7. <div id="div1"></div>

  CSS代码

  1. li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
  2. #div1{ width:100px; height:100px; background:red; margin:300px;}

  JavaScript代码

  1. //dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的
  2. //拖动不带链接的li,会起作用但不跳转链接
  3. //拖动带连接的a,会起作用也跳转
  4. window.onload = function(){
  5. var aLi = document.getElementsByTagName('li');
  6. var aA = document.getElementsByTagName('a');
  7. var oDiv = document.getElementById('div1');
  8. for(var i=0;i<aLi.length;i++){
  9. aLi[i].ondragstart = function(ev){ //拖拽前触发
  10. this.style.background = 'yellow';
  11. ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串
  12. ev.dataTransfer.effectAllowed = 'all';
  13. ev.dataTransfer.setDragImage(this,0,0);
  14. };
  15. aLi[i].ondragend = function(){  //拖拽结束触发
  16. this.style.background = '';
  17. };
  18. }
  19. for(var i=0;i<aA.length;i++){
  20. aA[i].ondragstart = function(ev){ //拖拽前触发
  21. this.style.background = 'yellow';
  22. ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串
  23. ev.dataTransfer.effectAllowed = 'link';
  24. };
  25. aA[i].ondragend = function(){  //拖拽结束触发
  26. this.style.background = '';
  27. };
  28. }
  29. oDiv.ondragenter = function(){  //相当于onmouseover
  30. this.style.background = 'green';
  31. };
  32. oDiv.ondragleave = function(){  //相当于onmouseout
  33. this.style.background = 'red';
  34. };
  35. oDiv.ondragover = function(ev){ //进入目标、离开目标之间,连续触发
  36. ev.preventDefault();  //阻止默认事件:元素就可以释放了
  37. ev.dataTransfer.dropEffect = 'link';  //真对外部文件
  38. };
  39. oDiv.ondrop = function(ev){  //释放鼠标的时候触发
  40. this.style.background = 'red';
  41. alert( ev.dataTransfer.getData('a') );
  42. alert( ev.dataTransfer.types );
  43. };
  44. };

  桌面拖拽到页面中的小例子

  HTML代码

  1. //dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的
  2. window.onload = function(){
  3. var oDiv = document.getElementById('div1');
  4. oDiv.ondragenter = function(){  //相当于onmouseover
  5. this.style.background = 'green';
  6. };
  7. oDiv.ondragleave = function(){  //相当于onmouseout
  8. this.style.background = 'red';
  9. };
  10. oDiv.ondragover = function(ev){ //进入目标、离开目标之间,连续触发
  11. ev.preventDefault();  //阻止默认事件:元素就可以释放了
  12. ev.dataTransfer.dropEffect = 'link';  //真对外部文件
  13. };
  14. oDiv.ondrop = function(ev){  //释放鼠标的时候触发
  15. ev.preventDefault();  //阻止默认行为
  16. this.style.background = 'red';
  17. var oFR = new FileReader();
  18. var list = ev.dataTransfer.files;  //当前拖拽的那个文件(返回的一个文件列表)
  19. //alert(list.length);
  20. //type : 文件类型
  21. //alert(list[0].type);
  22. oFR.onload = function(){ //读取完成,触发事件
  23. alert(this.result);  // 读取到的信息
  24. };
  25. oFR.readAsDataURL(list[0]);
  26. };
  27. };

  CSS代码

  1. li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
  2. #div1{ width:100px; height:100px; background:red; margin:300px;}

  JavaScript代码

  1. <div id="div1">梦龙小站</div>

  垃圾箱删除小例子

  HTML代码

  1. <ul>
  2. <li draggable="true">a</li>
  3. <li draggable="true">b</li>
  4. <li draggable="true">c</li>
  5. </ul>
  6. <div id="div1">垃圾箱</div>

  CSS代码

  1. li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
  2. #div1{ width:100px; height:100px; background:red; margin:300px; color:white;}

  JavaScript代码

  1. //dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的
  2. window.onload = function(){
  3. var aLi = document.getElementsByTagName('li');
  4. var oDiv = document.getElementById('div1');
  5. var iNow = 0;
  6. var targetLi = null;
  7. for(var i=0;i<aLi.length;i++){
  8. aLi[i].ondragstart = function(ev){ //拖拽前触发
  9. this.style.background = 'yellow';
  10. ev.dataTransfer.setData('text',this.innerHTML);  //存储一个键值对 : value值必须是字符串
  11. targetLi = this;
  12. };
  13. aLi[i].ondragend = function(){  //拖拽结束触发
  14. this.style.background = '';
  15. };
  16. }
  17. oDiv.ondragenter = function(){  //相当于onmouseover
  18. this.style.background = 'green';
  19. };
  20. oDiv.ondragleave = function(){  //相当于onmouseout
  21. this.style.background = 'red';
  22. };
  23. oDiv.ondragover = function(ev){ //进入目标、离开目标之间,连续触发
  24. ev.preventDefault();  //阻止默认事件:元素就可以释放了
  25. };
  26. oDiv.ondrop = function(ev){  //释放鼠标的时候触发
  27. this.style.background = 'red';
  28. var oText = ev.dataTransfer.getData('text');
  29. if(targetLi){
  30. targetLi.parentNode.removeChild(targetLi);
  31. this.innerHTML = '删除的是:'+oText;
  32. }
  33. };
  34. };

  HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)就为大家介绍到这里了,更多有关HTML5的相关小东东,敬请关注梦龙小站的相关更新。感谢大家的支持。

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)的更多相关文章

  1. HTML5实战与剖析之原生拖拽(一拖拽历史概述)

    提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...

  2. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  5. HTML5实战与剖析之字符集属性(charset和defaultCharset)

    HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...

  6. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

  7. HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

    HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. ...

  8. HTML5实战与剖析之媒体元素

    随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML ...

  9. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

随机推荐

  1. Installshield 打包安装包心得

     制作简单的安装软件 声明:下面的教程,是把读者当做完全没接触过IS的角度来制作的. 1. 启动InstallShield 12.建立一个InstallShield MSI Project,如图: 2 ...

  2. SQL SERVER连接、合并查询

    ----创建测试表MyStudentInfoCREATE table MyStudentInfo(  Id int not null primary key,  Name varchar(16),  ...

  3. 循序渐进Python3(一)-- 初识Python

    一.Python起源                

  4. 转 对菜鸟开发者的叮咛:花一万个小时练习Coding,不要浪费一万小时无谓地Debugging

    原文见http://blog.jobbole.com/74825/ Coding 之于科技的重要性不言可喻,也不再是软体工程师的专利,医师.律师.会计师.护理师.金融从业人员,甚至是听起来摸不着边的政 ...

  5. springMVC配置(XML配置详解)

    原文出自:http://www.newasp.net/tech/71609.html web.xml配置: servlet> <servlet-name>dispatcher< ...

  6. 在spark中操作mysql数据 ---- spark学习之七

    使用spark的 DataFrame 来操作mysql数据. DataFrame是比RDD更高一个级别的抽象,可以应用SQL语句进行操作,详细参考: https://spark.apache.org/ ...

  7. python学习笔记-Day7

    class Province: # 静态字段(类变量/属性) country = '中国' def __init__(self, name): # 普通字段(实例变量/属性) self.name = ...

  8. 使用 IntraWeb (40) - 自定义 Session 数据

    修改 UserSessionUnit 单元: unit UserSessionUnit; interface uses IWUserSessionBase, SysUtils, Classes, IW ...

  9. Apache配置多域名 AH00548: NameVirtualHost has no effect and will be removed in the next release

    httpd-vhosts.conf 中首行 NameVirtualHost *:80 删除掉即可解决.

  10. 【Maven】使用Maven构建多模块项目

    Maven多模块项目 Maven多模块项目,适用于一些比较大的项目,通过合理的模块拆分,实现代码的复用,便于维护和管理.尤其是一些开源框架,也是采用多模块的方式,提供插件集成,用户可以根据需要配置指定 ...