写在前面
鼠标拖拽效果常见于用户自定义展示页面,比如qq空间,x宝店铺装修等,操作灵动,所见即所得;或者是一个简单modal移动效果,方便用户查看原网页的内容。正好周末抽时间可以实现下,动手做做笔记,方便日后翻阅。
简单拖动
星星之火可以燎原,我们先从最简单的需求最起。
主要分为三个步骤:
- 鼠标按下,获取鼠标点击时在div中的相对位置。
- 鼠标移动,元素的位置 = 就是鼠标的位置 - 刚才的差值。
- 鼠标放开,给鼠标移动和鼠标放开赋值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&#