js拖拽：简单五步实现元素拖拽功能

首先我们可以体验一下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拖拽功能的全部内容，欢迎一起交流~