js带框的拖拽效果

最新推荐文章于 2021-08-04 17:01:57 发布

源源不断、、

最新推荐文章于 2021-08-04 17:01:57 发布

阅读量276

点赞数

文章标签： html css JavaScript

本文链接：https://blog.csdn.net/qq_41897598/article/details/79688508

版权

<!doctype html>
<html lang="en">
<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>
<div id = 'box'></div>
<script>
var box = document.getElementById('box');
box.onmousedown = function(e){
var box1 = document.createElement("div");
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>

源源不断、、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js带框的拖拽效果

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author"
复制链接

扫一扫