html5 拖拽绘图,HTML5 拖拽实现

简介：

最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。拖放图像时，把鼠标放到图像上，按住鼠标不放就可以拖放它。拖放文本时，要先选中文本，然后可以像拖放图像一样拖放被选中的文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元素都可以作为放置目标。IE5.5更进一步让网页中的任何元素都可以拖放。HTML5以IE的实例为基础指定了拖放规范。

一、基本释义

1 实现拖拽效果

* 要拖拽的文件是什么? - 源元素

* 要拖拽到哪里去? - 目标元素

2 目前实现拖拽效果

* 使用原生DOM就能实现 - 最麻烦

* 使用jQuery的插件 - 拖拽效果

* HTML5中提供的拖拽功能

二、HTML5中实现拖拽

1. 源元素事件

* dragstart - 当鼠标开始拖放时被触发

* drag - 当鼠标拖放过程中,类似于mousemove事件

* dragend - 当鼠标结束拖放时被触发

1 //为源元素绑定源元素事件

2 myimg.addEventListener("dragstart",MyDragStart);3 myimg.addEventListener("drag",MyDrag);4 myimg.addEventListener("dragend",MyDragEnd);

2. 目标元素事件

* dragenter - 当鼠标拖放进入到目标元素内被触发

* dragover - 当鼠标到达目前元素被触发

* 为该事件增加event.preventDefault();

* drop - 当鼠标实现拖放效果时被触发

* 默认情况下,该事件没有被触发

* 原因 - HTML页面默认情况下,不允许拖放

* 称之为HTML页面的默认行为

* 解决 - 阻止页面的默认行为

* 事件对象event.preventDefault()方法

* dragleave - 当鼠标拖放离开目标元素被触发

1 //为目标元素绑定事件

2 d2.addEventListener("dragenter",MyDragEnter);3 d2.addEventListener("dragover",MyDragOver);4 d2.addEventListener("drop",MyDrop);5 d2.addEventListener("dragleave",MyDragLeave);

3. dataTransfer对象

* 作用 - 类似于window系统的剪切板的功能

* 功能

* 可以将源元素的信息(数据),存储在这里

* 将存储在该对象的源元素信息,提供给目标元素

* 方法

* setData() - 设置(源元素)数据

* 在源元素事件中使用

* getData() - 获取设置的数据

* 在目标元素事件中使用

* clearData() - 清除(设置的)数据

* 所有的数据内容,存储在浏览器内存中

* 当使用完毕数据内容时,清除

* setDragImage()方法

* 作用 - 修改拖放过程中,鼠标跟随的图片效果

* 用法 - drag、dragstart等事件

* 注意 - 实际操作中,该方法几乎不用

4.可拖动

默认情况下，图像、链接和文本是可以拖动的，也就是说，不用额外编写代码，用户就可以拖动它们。文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。

让其它元素可以拖动也是可能的。HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。图像和链接的draggable

属性自动被设置成了true，而其它元素这个属性的默认值都是false。要想让其它元素可拖动，或者让图像或链接不能拖动，都可以设置这个属性。例如：

1

2

3

4 ...