多个div实现随意拖拽功能

最新推荐文章于 2023-06-21 14:42:59 发布

weixin_30319153

最新推荐文章于 2023-06-21 14:42:59 发布

阅读量1.1k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Fancy1486450630/p/10538457.html

版权

鼠标事件

mousedown
mousemove
mouseup
注意事项:
被拖动的div的position属性值一定是absolute。切记不可使用margin-top:10px;而应该使用top:10px;
onmousedown事件需要在window.onload时加载。
如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tuozhuai</title>
<style>
* {
margin: 0px;
padding: 0px;
}

div {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 5%;
}

#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 10%;
left: 5%;
}
</style>
</head>

</div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script>
function drag(id) {
var odiv = document.getElementById(id)
odiv.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - odiv.offsetLeft;
var disY = ev.clientY - odiv.offsetTop;
document.onmousemove = function(ev2) {
var ev2 = ev2 || event;
var left = ev2.clientX - disX;
var top = ev2.clientY - disY;
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
if(left > w - odiv.offsetWidth) {
left = w - odiv.offsetWidth
}
if(left < 0) {
left = 0;
}
if(top < 0) {
top = 0;
}
if(top > h - odiv.offsetHeight) {
top = h - odiv.offsetHeight
}

odiv.style.left = left + "px";
odiv.style.top = top + "px"

}
document.onmouseup = function(ev2) {
document.onmousemove = null
}
}
}
drag("div1")
drag("div2")
drag("div3")
drag("div4")
</script>
</body>

</html>

转载于:https://www.cnblogs.com/Fancy1486450630/p/10538457.html

weixin_30319153

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
多个div实现随意拖拽功能

鼠标事件mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute。切记不可使用margin-top:10px;而应该使用top:10px;onmousedown事件需要在window.onload时加载。如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。...
复制链接

扫一扫