首先，为了使元素可拖动，需要给元素添加draggable的 属性，并且设置为 true ：

当元素拖动时，会发生以下几个事件，虽然跟鼠标的mousedown，mousemove和mouseup类似，但是也有区别：

这里火狐有个bug，元素拖拽的时候，需要设置一下setData，之后drag和dragend才能正常工作：

ondragstart事件演示（拖动下面的灰色区域）：

ondragend事件演示（拖动下面的灰色区域）：

ondrag事件演示（拖动下面的灰色区域），需要注意的是，只要你开始了拖拽事件，这里的drag是一直在触发的，哪怕是鼠标静止不动，可以拖动下面的div看效果，这一点跟mousemove不同：

以上三个事件，是针对拖动对象的，接下来还有三个事件，是针对拖动到某个放置元素上时触发的事件：

ondragenter和ondragleave事件的演示（拖动下面的灰色区域到目标位置）：

ondragover和ondrag事件类似，也是一直在触发，前提是鼠标在目标元素上，就不在演示了。

ondrop事件演示，需要注意的是，要想drop事件触发，必须在dragover事件中阻止默认事件。：

拖放有关的dataTransfer对象：

1. setData和getData。
下面是关于setData和getData的使用，拖动的时候设置data，然后再目标元素释放鼠标来获取data。

2. effectAllowed：设置拖拽鼠标的样式
分别有（none，copy，copyLink，copyMove，link，linkMove，move，all，uninitialized），具体不做演示。

3. setDragImage设置拖拽的样式，默认拖拽样式是复制一个拖拽元素且半透明的，这个可以设置成其他的。

下面就是根据以上写了一个基本的demo演示，功能类似拖拽添加购物车，点击删除等。