注:链接、图片默认是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. 一道打印M的面试题

    public class Demo { /** * 平面图形题(二维数组) */ public static void main(String[] args) { int num = 25; int ...

  2. uploadify 报错集锦

    1.404 : 没有路由 检查 路由的大小写 或者 拼写 2.500: linux 没有读写权限

  3. 【ionic】微信表情设置教程

    NO.0 前提你的下载我的App :超级逗表情 Andorid:http://fir.im/chaojidbq Ios:https://github.com/apanly/chaojidbq (源码, ...

  4. 《Linux内核设计与实现》CHAPTER4阅读梳理

    <Linux内核设计与实现>CHAPTER4阅读梳理 [学习时间:3hours] [学习内容:多任务:进程调度策略:Linux中进程调度的关键问题:抢占] 个人思考部分见[]标出的部分 一 ...

  5. 关于preg_match输出多个数组的解释,使用()时

    第一个数组显示的是所有的匹配,第二个显示的是第一个括号里的内容,第三个显示的是第二个括号里的内容

  6. LeetCode Reconstruct Itinerary

    原题链接在这里:https://leetcode.com/problems/reconstruct-itinerary/ 题目: Given a list of airline tickets rep ...

  7. IEnumerable和IEnumerator

    概述 IEnumerable和IEnumerator接口存在的意义:用来实现迭代的功能! public interface IEnumerable { IEnumerator GetEnumerato ...

  8. 一种构造WEB服务器端recv和send接口阻塞现象的方法

    send阻塞 socket recv send接口阻塞,会导致服务器端不在响应客户端任何请求,所以一般情况, 会将socket设置为非阻塞状态, 但是有些场景,例如ssl_accept就需要使用阻塞的 ...

  9. TCP中异常关闭链接的意义 异常关闭的情况

    终止一个连接的正常方式是发送FIN. 在发送缓冲区中 所有排队数据都已发送之后才发送FIN,正常情况下没有任何数据丢失. 但我们有时也有可能发送一个RST报文段而不是F IN来中途关闭一个连接.这称为 ...

  10. CSS3 border-image详解、应用

    一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...