html 拖拽坐标,HTML5的拖拽与拖放效果详解

原标题：HTML5的拖拽与拖放效果详解

HTML5中新加的元素拖放(Drag &Drop)是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。过去，我们用监听鼠标的Mousedown、Mouseove、Mouseup等事件来不停地获取鼠标的坐标来修改元素的位置，而现在html5原生的Drag &Drop事件(DnD)，方便了许多，而且性能也有了提高。

支持该效果的浏览器有：Internet Explorer 9+、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

为了使元素可拖动，把 draggable 属性设置为 true ：

可拖动的div

注意：在大多数浏览器中，a元素和img元素默认就是可以拖放的，但是为了保险起见，最好还是加上draggable属性。

拖动事件：

dragstart:网页元素开始拖动时触发。

drag:被拖动的元素在拖动过程中持续触发。

dragenter:被拖动的元素进入目标元素时触发，应在目标元素监听该事件。

dragleave:被拖动的元素离开目标元素时触发，应在目标元素监听该事件。

dragover:被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。

drap:被拖动元素或从文件系统选中的文件，拖放落下时触发。

dragend:网页元素拖动结束时触发。

注意：以上这些事件都可以指定回调函数。

dataTransfer对象:

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息。

上面代码在拖动开始时，在dataTransfer对象上储存一条文本信息，内容为“Helloweba”。当拖放结束时，可以用getData方法取出这条信息。

dataTransfer对象的属性：

effectAllowed:指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized(默认值，等同于all，即允许一切操作)。

files:包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。

types:储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法：

setData(format, data):在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。

getData(format):从dataTransfer对象取出数据。

clearData(format):清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。

setDragImage(imgElement, x, y):指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。

例子展示：

HTML结构如下：

#drags是被拖动的对象盒子，#drops是目标区域盒子。

java代码：

要调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)，此外，通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。返回搜狐，查看更多

责任编辑：