js的拖拽效果主要用到以下三个事件：
mousedown鼠标按下事件mousemove鼠标移动事件mouseup鼠标抬起事件当点击dom的时候，记录当前鼠标的坐标值，也就是x、y值，以及被拖拽的dom的top、left值，而且还要在鼠标按下的回调函数里添加鼠标移动的事件：
document.addEventListener(mousemove,moving,false)和添加鼠标抬起的事件
document.addEventListener(mouseup,function(){document.removeEventListener(mousemove,moving,false);},false);这个抬起的事件是为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。
当鼠标按下鼠标移动的时候，记录移动中的x、y值，那么这个被拖拽的dom的top和left值就是：
top=鼠标按下时记录的dom的top值+（移动中的y值-鼠标按下时的y值）
left=鼠标按下时记录的dom的left值+（移动中的x值-鼠标按下时的x值）;
效果如下：
具体代码：
明白原理后实现十分简单，代码就这一点。
另外，我也封装了一个react的拖拽小组件，有兴趣可以了解一下。
githup