This article mainly shares with you js to implement framed drag and drop effect, mainly in the form of code. I hope it can help everyone.
<!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>The above is the detailed content of js implements framed drag and drop effect. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
