允许拖动
在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/>元素移动到指定位置。