html5 drag and drop
注:链接、图片默认是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的更多相关文章
- HTML5 drag和drop的亲手实践
起因 最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序.因此,这阵子就看了一下网上的一些drag和drog的文章以及W3C的介绍,然后自己亲手实践了 ...
- 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 ...
- angularjs drag and drop
angular-dragula Drag and drop so simple it hurts 480 live demo angular-drag-and-drop-lists Angular d ...
- 使用 Drag and Drop 给Web应用提升交互体验
什么是 Drag and Drop (拖放)? 简单来说,HTML5 提供了 Drag and Drop API,允许用户用鼠标选中一个可拖动元素,移动鼠标拖放到一个可放置到元素的过程. 我相信每个人 ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- 通过HTML5的Drag and Drop生成拓扑图片Base64信息
HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...
- 基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- HTML5 拖放(Drag 和 Drop)功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
随机推荐
- ios-改变button四个角的弧度
-(void)createTitleView{ UIView * backview = [[UIView alloc]init]; backview.frame =CGRectMake(87*kHei ...
- NEC学习 ---- 模块 -文本圆角背景导航
下图是效果图: 然后, 左右两边的圆角图片和背景图片如下 (因为截图工具的原因, 可能图片不是很清晰. 这个图片有4个部分, 分别是中间的背景图, 左右圆角以及栏目分隔白线) 思路: 利用inline ...
- win8.1蓝屏解决
按Windows 徽标键 +X键,点击“命令提示符(管理员)”,复制以下命令并运行: SFC /SCANNOW (此命令需要一段时间完成,不要关闭它,即使进度看上去停止不动.) reg add &qu ...
- Web性能API——帮你分析Web前端性能
前端性能统计必备api,有不知道的吗? 正文从这开始- 开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户 ...
- C语言 ---- 数组 iOS学习-----细碎知识点总结
#pragma mark - 数组:用来存放同一数据类型的数据 // 数组的定义:类型说明符 数组名[常量表达式] = {值1, 值2, 值3...}; // 定义一个float类型的数组,用来 ...
- CentOS 配置网络yum源
配置网络yum源(需要保证外网开通,使用网易163提供开源镜像站) 1.下载repo文件 方法一:下载到本地windows再上传到linux服务器上: 下载地址 : http://mirrors.16 ...
- mysql中engine=innodb和engine=myisam的区别
最开始用MySQL Administrator建数据库的时候,表缺省是InnoDB类型,也就没有在意.后来用Access2MySQL导数据的时候发现只能导成 MyISAM类型的表,不知道这两种类型有什 ...
- JSON风格指南-真经
简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语 ...
- RDIFramework.NET ━ 9.15 个性化设置 ━ Web部分
RDIFramework.NET ━ .NET快速信息化系统开发框架 9.15 个性化设置 -Web部分 个性化设置,主要针对用户的偏好对界面进行设置,主界面如下: 9.15.1界面皮肤设置 目前框 ...
- [Android Tips] 7. 以调试模式启动应用
adb shell am set-debug-app -w {package_name}