Html
    Css
    Js

    
                        
div {
	width:100px;
	height:100px;
	background:red;
	position:absolute;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js实现简单拖拽代码

更新时间:2021-09-08 09:15:55

说明在代码里已经很详细了,主要说下思路吧,要想拖拽div,并且保障鼠标移动的时候相对于div的位置一直不变,将拖拽分为三部分,鼠标按下、鼠标滑动、鼠标抬起
一、鼠标在div上按下时要获取
两个值:

1、鼠标在页面中的x、y坐标(也就是pagex和pagey),

2、div距离页面左边距和上边距(也就是offsetleft和offsettop),这两个值相减,得到的就是鼠标在div上的左边距和上边距(也就是offsetx和offsety)。
二、鼠标滑动时,要一直计算鼠标在页面上的坐标并减去鼠标在按下时获取到的offsetx和offsety,将其赋值给div的left和top
三、鼠标抬起,鼠标抬起后,鼠标滑动仍在继续,所以要让鼠标抬起后鼠标滑动效果消失,设置document.onmousemove = null;即可
jquery方法思路和js原生一模一样,代码更加简化,着重注意一个细节,var _this = this; 如果不加这一个,后面函数里的this指的是document,所以必须加上

0