js实现拖拽效果

写在前面

鼠标拖拽效果常见于用户自定义展示页面，比如qq空间，x宝店铺装修等，操作灵动，所见即所得；或者是一个简单modal移动效果，方便用户查看原网页的内容。正好周末抽时间可以实现下，动手做做笔记，方便日后翻阅。

简单拖动

星星之火可以燎原，我们先从最简单的需求最起。

主要分为三个步骤：

1. 鼠标按下，获取鼠标点击时在div中的相对位置。
2. 鼠标移动，元素的位置 = 就是鼠标的位置 - 刚才的差值。
3. 鼠标放开，给鼠标移动和鼠标放开赋值null，除非再次点击，否则不会有任何移动效果。

映射成代码：

dragCircle.onmousedown = function(){

    ...//鼠标按下

    dragCircle.onmousemove = function(){

        ...//鼠标移动

    };

    dragCircle.onmouseup = function(){

        ...//鼠标抬起

    };

};

效果如下：

height="265" scrolling="no" title="jBEdGX" src="//codepen.io/BenjaminShih/embed/jBEdGX/?height=265&theme-id=light&default-tab=js,result&embed-version=2" allowfullscreen="true&#