多个div实现随意拖拽功能

鼠标事件

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>

巴特西

多个div实现随意拖拽功能

最新文章

热门文章