实例：HTML5拖放API实现拖放排序

前言

HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。

想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。

拖放事件

拖放事件由不同的元素产生。一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内。这里，我暂时把被拖放的元素称为源对象，被经过的元素称为过程对象，到达的元素我称为目标对象。不同的对象产生不同的拖放事件。

源对象：

1. dragstart：源对象开始拖放。

2. drag：源对象拖放过程中。

3. dragend：源对象拖放结束。

过程对象：

1. dragenter：源对象开始进入过程对象范围内。

2. dragover：源对象在过程对象范围内移动。

3. dragleave：源对象离开过程对象的范围。

目标对象：

1. drop：源对象被拖放到目标对象内。

a元素

b元素

c元素