注:链接、图片默认是draggable的。

mousemove在整个拖放的过程中不会被触发。

dragStart设置:

e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text", e.target.innerHTML);
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;

dragEnd设置:

e.dataTransfer.clearData("text");
return false;

dragEnter设置:

return true;

dragOver设置:

e.preventDefault();//针对IE阻止链接的跳转行为
return true;

drop设置:

return false;

html5 drag and drop的更多相关文章

  1. HTML5 drag和drop的亲手实践

    起因 最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序.因此,这阵子就看了一下网上的一些drag和drog的文章以及W3C的介绍,然后自己亲手实践了 ...

  2. 20 Best Drag and Drop jQuery Plugins--reference

    reference from:http://dizyne.net/20-best-drag-drop-jquery-plugins/ jQuery has done a great job repla ...

  3. angularjs drag and drop

    angular-dragula Drag and drop so simple it hurts 480 live demo angular-drag-and-drop-lists Angular d ...

  4. 使用 Drag and Drop 给Web应用提升交互体验

    什么是 Drag and Drop (拖放)? 简单来说,HTML5 提供了 Drag and Drop API,允许用户用鼠标选中一个可拖动元素,移动鼠标拖放到一个可放置到元素的过程. 我相信每个人 ...

  5. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  6. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  7. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

  8. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  9. HTML5 拖放(Drag 和 Drop)功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

随机推荐

  1. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  2. JQuery-事件(部分)

    /* 1. bind跟on是类似的方法,下面示例可相互替换 $('#click1').on('click',toYellow); // click绑定toYellow方法 $('#click1').o ...

  3. smarty模板原理和增删改查例题

    Smarty模板:(前后端分离)原理:核心是一个类,先修改配置文件,在使用的时候引入配置文件即可,(init.inc.php)$smarty->assign("ceshi", ...

  4. 初步了解JSONP

    一.JSON 与 JSONP JSON是一种基于文本的数据交换方式(数据描述格式),JSONP是一种非官方跨域数据交互协议. ajax的核心是通过XmlHttpRequest获取非本页内容,而json ...

  5. iOS图片压缩处理

    理解概念 首先,我们必须明确图片的压缩其实是两个概念: “压” 是指文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降. “缩” 是指文件的尺寸变小,也就是像素数减少,而长宽尺寸变小,文件体 ...

  6. scala在linux以及在windows的安装,以及在IDEA中新建Scala项目

    一:linux下配资scala 1.上传 2.解压 3.配置环境 4.source一下 5.启动和简单使用 6.输出语句 二:scalac的使用 1.新建文件测试目录 2.新建程序 3.文件编译器书写 ...

  7. 转: Linux磁盘扩容

    from:https://www.rootusers.com/how-to-increase-the-size-of-a-linux-lvm-by-expanding-the-virtual-mach ...

  8. butterknife异常提示:attribute value must be constant

    就是因为你的android工程是lib类型的 如: apply plugin: 'com.android.library' android { compileSdkVersion 23 buildTo ...

  9. ActiveMq池

    有两种连接方式 1.Spring  引用 <!-- 配置JMS连接工厂 --> <bean id="connectionFactory" class=" ...

  10. (转载)throw和throws的区别

    1.throw:(针对对象的做法)抛出一个异常,可以是系统定义的,也可以是自己定义的.下面举两个例子:抛出Java中的一个系统异常:public class One {public void yich ...