利用HTML5 的拖放Drag 相关的API，怎么实现拖动的对象离开原来的位置

Question

现在有个需求就是拖动div交换位置。

怎么实现比如拖动盒子01。那么盒子01就会离开原来的位置，但是利用HTML5 的拖放Drag相关的API，根本没有这样的方法。

还是说这个需要用到鼠标按下（mousedown事件）、移动时（mousemove事件）、松开时（mouseup事件），配合H5的拖拽API dragstart dragenter dragover drop 才能实现这个效果。

Answer 1

仅提供思路。H5的原生拖放只是允许监听鼠标拖拽事件，并允许传递自定义数据。具体实现什么行为，需要自己写。如果用原生拖放，自己实现的部分，逻辑类似下面这句话:child_1.insertBefore(child_2);child_1是dragstart时候得到的，而child_2的获取需要在drop时通过相对位置计算得出来的，只有这部分在整个实现中比较繁琐。原生拖放在实现这种拖拽移动DOM的表现上，体验不如用监听鼠标事件来得好。原生拖放在拖拽过程中没办法实现被拖拽的元素跟随鼠标移动的效果。但用鼠标事件实现起来相对更复杂一些。鼠标拖拽实现基于absolute position布局。每个子元素监听mousedown事件，父元素监听mouseover和mouseup事件。在mousedown时记录被拖拽的元素位置信息和鼠标位置信息。在mouseover中根据鼠标位置相对变化不停计算被拖拽元素最新的位置，并改变其位置，实现被拖拽元素跟着鼠标走的效果。并且可以同时计算如果此刻松开鼠标，这个元素应该被放置到什么位置，利用这个数据，不仅可以在mouseup时直接调整元素位置，还可以在mouseover过程中调整其他元素位置来实现移动提示效果。