js实现带框的拖拽效果
程序员文章站
2022-05-11 21:43:49
...
本文主要和大家分享js实现带框的拖拽效果，主要以代码的形式和大家分享，希望能帮助到大家。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#box {
width:100px;
height:100px;
background:#ff0099;
position:absolute;
}
.box1 {
border:1px solid #000000;
position:absolute;
}
</style>
</head>
<body>
<p id = 'box'></p>
<script>
var box = document.getElementById('box');
box.onmousedown = function(e){
var box1 = document.createElement("p");
document.body.appendChild(box1);
box1.style.width = box.offsetWidth + 'px';
box1.style.height = box.offsetHeight + 'px';
box1.style.left = box.offsetLeft + 'px';
box1.style.top = box.offsetTop + 'px';
box1.className = 'box1';
e = e || event;
//计算鼠标在盒子中的位置；
var x = e.pageX - box.offsetLeft;
var y = e.pageY - box.offsetTop;
document.onmousemove = function(e){
e = e || event;
//计算盒子在页面上的坐标；
var xx = e.pageX - x;
var yy = e.pageY - y;
box1.style.left = xx + 'px';
box1.style.top = yy + 'px';
document.onmouseup = function(){
box.style.left = box1.offsetLeft + 'px';
box.style.top = box1.offsetTop + 'px';
document.body.removeChild(box1);
document.onmousemove = 'null';
}
return false;
}
}
</script>
</body>
</html>
以上就是js实现带框的拖拽效果的详细内容，更多请关注其它相关文章！