最早在网页中引入js拖放功能的是IE4,并且只可以拖放图像和某些文本。IE5.5以后网页中的任何元素都可以进行拖放。HTML5以IE为实例制定了拖放规范。FireFox3.5、Safari3+和Chrome也根据HTML5规范实现了原声拖放功能。

  拖动某元素时,将依次触发下列事件:

    (1) dragstart

    (2)drag

    (3)dragend

  这个事件和mousemove事件相似。以上三个事件的目标都是被拖动元素,默认情况下,浏览器不会在拖动期间改变被拖动元素的外观,但你可以自己修改。不过,大多数浏览器会为正被拖动的元素创建一个半透明的副本,这个副本始终跟随着光标移动。

  当某个元素被拖动到一个有效的放置目标上时,下列事件将依次发生:

    (1)dragenter

    (2)dragover

    (3)dragleave 或 drop

HTML5-原声拖放的更多相关文章

  1. 比较原声socket 、GCDAsyncSocket

    原声socket NSInputStream 输入流(OC)NSOutputStream 输出流(OC)1:通过c语言的输入输出流CFReadStreamRef/CFWirteStreamRef(输入 ...

  2. 关于ios原声嵌入web页面的问题

    当在一个界面中既有原生又有web的时候,如果想让上下整体滑动的话,我们怎么确定web的高度呢,下面分享一下我的心得 首先在webView的代理方法中我们可以获取到加载完整个web页面的高度 - (vo ...

  3. 大D实例化model-->调用自定义类方法,大M调用原声model方法

    class ContactsModel extends Model{ public function addxxx(){ } } $conmodel = D('contacts','Model'); ...

  4. 移动WEB模拟原声APP滑动删除

    移动WEB模拟原声APP滑动删除 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. HTML5 中的拖放

    今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...

  6. HTML5学习笔记 拖放

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

  7. HTML5中的拖放

    关于HTML5中的拖放 拖放(Drag 和 Drop)是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 中,拖放是标准的组成部分.在HTML5中用户可以使用鼠标选择一个可拖动元素,将元素 ...

  8. node.js 安装方法 以及 用原声搭建服务器

    node.js 安装方法: 第一步: 64位的安装包网址:   https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi 第二步: 进入命令提示框  输入 ...

  9. HTML5新增的拖放API---(一)

    HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有 ...

随机推荐

  1. rk3288的SDK修复cm3218光敏驱动bug

    瑞芯的Android 4.4的SDK中kernel的补丁例如以下: diff --git a/arch/arm/boot/dts/rk3288-tb_8846.dts b/arch/arm/boot/ ...

  2. [Bootstrap] 3. Responsive Gridding (.hidden-sm, visible-md)

    Grid Size For .col-md We started designing our site using the col-md-* classes. These classes target ...

  3. unity3d 中加入�视频

    加入�音频 视频 using UnityEngine; using System.Collections; public class play_video : MonoBehaviour { publ ...

  4. EasyUI基础入门之Easyloader(载入器)

    在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...

  5. 360开源的类Redis存储系统:Pika

    Pika 是 360 DBA 和基础架构组联合开发的类 Redis 存储系统,完全支持 Redis 协议,用户不需要修改任何代码,就可以将服务迁移至 Pika.有维护 Redis 经验的 DBA 维护 ...

  6. 火狐HACK

     /*针对Firefox*/@-moz-document url-prefix() {    #nav{ width:200px; }} 

  7. 未打开Ad Hoc Distributed Queries

    SSAS访问ORACLE数据仓库读取数据创建CUBE的时候报如下错误: SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT 'Open ...

  8. oracle字段类型

    oracle 字段类型CHAR    固定长度字符串    最大长度2000    bytes              VARCHAR2    可变长度的字符串    最大长度4000    byt ...

  9. iOS之SDWebImage的使用

    第一步,下载SDWebImage,导入工程.github托管地址https://github.com/rs/SDWebImage 第二步,在需要的地方导入头文件 1 #import "UII ...

  10. 跨站脚本攻击(XSS)

    跨站脚本攻击(XSS) XSS发生在目标网站中目标用户的浏览器层面上,当用户浏览器渲染整个HTML文档的过程中就出现了不被预期的脚本执行. 跨站脚本的重点不是在“跨站”上,而应该在“脚本上” 简单例子 ...