IOS美区账号微信: springsunshine2017

前端技术 · 2020年9月16日 0

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拖拽功能的全部内容,欢迎一起交流~