文档章节

html5之拖拽API

bosscheng
 bosscheng
发布于 2014/11/06 11:58
字数 354
阅读 81
收藏 1

实现方式

html5的实现方式:将想要拖放的对象元素的draggable属性设置为true(img元素和a标签(指定href)默认是允许拖拽的)

html4的实现方式:通过mousedown,mousemove,mouseup实现拖放操作。


拖放的相关事件

dragstart  开始拖放操作

drag  拖放过程中

dragenter 被拖放的对象进入到本元素的范围内

dragover 被拖放的对象在本元素中移动

dragleave 被拖放的元素离开了本元素的范围

drop  有其他元素被拖放到本元素中

dragend 拖放操作结束


DataTransfer对象的属性和方法

属性

dropEffect  :  表示拖放操作的视觉效果,允许对其进行值得设定,该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内,允许值为none、copy、link、move

effectAllowed  :  用来指定当前元素被拖拽的时候允许的视觉效果,可以指定的效果:none,copy,copyLink,copyMove,link,linkMove,move,all,unintialize

type : 存入数据的种类,字符串的伪数组。

方法

void clearData(DOMString format) 清除掉DataTransfer对象中存放的数据,如果省略参数format,则清除全部数据

void setData(DOMString format, DOMString data) 向DataTransfer对象中存入数据

DOMString getData(DOMString format) 读取数据

void setDragImage(Element image, long x, long y) 用image元素设置拖放图标


© 著作权归作者所有

上一篇: html5之canvasAPI
下一篇: HTML5之文件API
bosscheng
粉丝 81
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
javascript 使用Html5 File Api进行文件读取

javascript 使用Html File Api进行文件读取,注意“读取”是只读不写,不可以主动获取浏览器所在主机的文件列表。 Html5 中 FileApi主要有 FileUpload, File,FileList,FileError,Blob,Fil...

IamOkay
2014/11/27
0
0
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

日期:2011/11/19 来源:GBin1.com 昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader ,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式...

gbin1
2011/11/19
0
1
分享一个HTML5的drag and drop API实现的图片拖拽分组效果

日期:2012-4-17 来源:GBin1.com 在线演示 本地下载 今 天我们介绍HTML5的拖拽功能。基本目前所有的现代浏览器(Firefox,Chrome,Safari,或者Opera)都支持这个实用的功能。这意 味着我们可...

gbin1
2012/04/17
0
0
HTML 5 & CSS 3 的新交互特性

本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由 于图片的体积不算太小,可能网速慢的网友在浏览的时...

jackzlz
2011/12/02
2K
13
Google HTML5训练营:图片旋转墙

六月末,第一次去参加Google的HTML5训练营,估计其他同学多少都接触过。从下午一点到晚上10点,将近9个小时的时间里,首先由杜欢、寒蕊、胡坤做了一些技术上的分享,我对Google工程师寒蕊MM的...

冯尚实
2011/07/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

二进制位操作

单片机,或者一些模块的设置操作,都是由一个字节数据来完成,每位各有定义。就需进行位操作来组合需要的数字结果。 以JavaScript为例,编写位操作。 我们期望得到这样一个二进制数:0101101...

format
22分钟前
2
0
聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
今天
6
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
今天
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
495
12
Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部