HTML5拖拽的简单实例

1. <ul>          <li id="item1" draggable="true">列表1</li>  
2.     <li id="item2" draggable="true">列表2</li>       <li id="item3" draggable="true">列表3</li>  
3.     <li id="item4" draggable="true">列表4</li>       <li id="item5" draggable="true">列表5</li>  
4.     <li id="item6" draggable="true">列表6</li>   </ul>  

拖拽相关的事件

ondragstart：此事件在用户开始拖动元素或选择文本时触发 ondrag:元素正在拖动时触发 ondragend:用户完成元素拖放时触发 ondragleave:当被鼠标拖动的对象离开其容器范围时触发 ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件，此事件发生在目标元素身上 ondrop:在一个拖动过程中，释放鼠标时触发，此事件作用在目标元素身上

dataTransfer 对象相关方法

setData(format,data):添加自定义数据格式 getData(format):获取自定义的数据格式clearData([format]):清除自定义的数据格式及数据

Event.preventDefault()

此方法是阻止事件的默认行为，在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发

实现案例：