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