js拖拽功能节流阀防抖动

最新推荐文章于 2024-04-17 14:13:40 发布

guoxuepengaa

最新推荐文章于 2024-04-17 14:13:40 发布

阅读量360

点赞数 1

本文链接：https://blog.csdn.net/guoxuepengaa/article/details/118767611

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

#div {

width:100px;

height:100px;

background-color:pink;

position:absolute;

}

</style>

<body>

var dv = document.getElementById('div');

var x = 0;

var y = 0;

var l = 0;

var t = 0;

var flag = false;

dv.onmousedown = function(e) {

x = e.clientX;

y = e.clientY;

l = dv.offsetLeft;

t = dv.offsetTop;

flag = true;

dv.style.cursor = 'move';

}

window.onmousemove = function(e) {

if (flag == 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() {

flag = false;

dv.style.cursor = 'default';

}

</script>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guoxuepengaa

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js拖拽功能节流阀防抖动

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title&...
复制链接

扫一扫