HTML5拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。拖放特效可以应用在很多地方，如把苹果放进篮子里等的小游戏，通过拖拽把文字扔进垃圾桶里等等。
在拖放的过程中会触发以下事件：
在拖动目标上触发事件(源元素):ondragstart-用户开始拖动元素时触发ondrag-元素正在拖动时触发ondragend-用户完成元素拖动后触发释放目标时触发的事件：ondragenter-当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover-当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragleave-当被鼠标拖动的对象离开其容器范围内时触发此事件ondrop-在一个拖动过程中，释放鼠标键时触发此事件如何在拖动对象之间传递数据
HTML5为所有的拖动相关事件提供了一个新的属性：
e.dataTransfer{}
功能：用于在源对象和目标对象的事件间传递数据
源对象上的事件处理中保存数据：
e.dataTransfer.setData(k,v);
目标对象上的事件处理中读取数据：
varv=e.dataTransfer.getData(k);
HTML5拖动实例
divid=div1ondrop=drop(event)ondragover=allowDrop(event)/div
imgid=drag1src=/images/logo.pngdraggable=trueondragstart=drag(event)width=height=69
script
functionallowDrop(ev){ev.preventDefault();}
functiondrag(ev){ev.dataTransfer.setData(Text,ev.target.id);}
functiondrop(ev){
ev.preventDefault();
vardata=ev.dataTransfer.getData(Text);
ev.target.appendChild(document.getElementById(data));
}
/script
说明：在上面的实例代码中：首先将image图片定义为draggable=true为可拖动的，当拖动时执行drag(event)事件，当拖动到div1上时，触发allowDrop(event)事件，当这时放手时，会执行ondrop事件，即将图片作为div1的内部元素存储，在页面表现上就是图片在div1层里面了。