首先我们可以体验一下js拖拽的效果,鼠标点击红色正方形,拖拽即可

点击拖拽

第一步:获取元素
var dv = document.getElementById(‘dv’);
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
第二步:处理鼠标按下事件
dv.onmousedown = function(e) {
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;

//获取左部和顶部的偏移量l = dv.offsetLeft;t = dv.offsetTop;//开关打开isDown = true;//设置样式 dv.style.cursor = 'move';

}
第三步:处理鼠标移动事件,并获取x和y坐标值
window.onmousemove = function(e) {
if (isDown == false) {
return;
}
var nx = e.clientX;
var ny = e.clientY;
第四步:计算移动后的左偏移量和顶部的偏移量
var nl = nx – (x – l);
var nt = ny – (y – t);

dv.style.left = nl + 'px';dv.style.top = nt + 'px';

}
第五步:鼠标抬起事件,并且将开关关闭
dv.onmouseup = function() {
isDown = false;
dv.style.cursor = ‘default’;
}

以下是源码,复制出来格式化一下就可以用了:

var dv=document.getElementById(“elexxx”);var x=0;var y=0;var l=0;var t=0;var isDown=false;dv.onmousedown=function(e){x=e.clientX;y=e.clientY;l=dv.offsetLeft;t=dv.offsetTop;isDown=true;dv.style.cursor=”move”};window.onmousemove=function(e){if(isDown==false){return}var nx=e.clientX;var ny=e.clientY;var nl=nx-(x-l);var nt=ny-(y-t);dv.style.left=nl+”px”;dv.style.top=nt+”px”};dv.onmouseup=function(){isDown=false;dv.style.cursor=”default”};

以上就是简单五步实现元素js拖拽功能的全部内容,欢迎一起交流~

微信交流