拖曳释放HTML5 html拖放api

允许拖动      

在Html5中，<img.../>元素默认就是可拖动的；而<a.../>元素只要设置了href属性也是可以拖动的。

而对于普通元素而言，如果需要将其变为可拖动的，只需将该元素的draggable属性设为true即可。但仅仅只设置该属性还不够，因为该属性只表示该元素可以拖动，可是并未携带任何数据，所以用户无法看到拖动效

为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。

 允许拖放

从以上代码运行结果中可以发现，无论是拖动图片还是div，拖动时都显示一个“禁止”标志，这说明就算目标被拖到“目标地点”，“目的地”却并不接受该元素——因为当被拖动元素被“拖过”document对象时，document对象阻止了默认的拖动事件，而其他HTML组件也是位于document对象内的，因此他们也不能接受放。

为了达到"放"的目标，我们应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。

请注意：

不同浏览器对于拖放操作的默认动作并不相同，例如：当用户将HTML元素拖到指定位置释放后，Firefox浏览器会默认打开一个新的页面，页面的URL为拖放操作携带的数据。但当使用Chrome浏览器执行该操作，Chrome浏览器未执行任何默认动作。

若我们想要取消拖放操作的默认行为，则可以为document的ondrop事件绑定监听器。

下面页面代码实现了一个可以自由拖放的<div/>元素。

在为document的ondrop事件绑定监听器的代码中，将<div/>元素的left属性设为evt事件发生点的X坐标，top属性设为evt事件发生点的Y坐标。这样就可以将<div/>元素移动到指定位置。