js拖动(点击+移动)全方位拉出矩形

最新推荐文章于 2023-10-10 17:38:43 发布

就这么开心

最新推荐文章于 2023-10-10 17:38:43 发布

阅读量1.2k

点赞数 3

文章标签： s拖动(点击移动)全方位拉出矩形鼠标点击移动全方位拉矩形

本文链接：https://blog.csdn.net/weixin_43478869/article/details/83855631

版权

实现鼠标点击按下拉动，可以全方位移拉出矩形。

代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>拉框</title>

<style type="text/css">

.box {

border:10px solid #0000CC ;

width: 0px;

height: 0px;

position: absolute;

opacity: 0.5;

cursor: move;

}

</style>

<script type="text/javascript">

// // 记录鼠标按下时的坐标

// var startX = 0;

// var startY = 0;

// // 记录鼠标抬起时候的坐标

// var mouseX = startX;

// var mouseY = startY;

// 鼠标按下

document.onmousedown = function(e) {

// 为鼠标点击时初始坐标

startX = e.clientX;

startY = e.clientY;

var box = document.createElement("div");

box.id = "box";

box.className = "box";

box.style.top = startY + 'px';

box.style.left = startX + 'px';

document.body.appendChild(box);

}

// 鼠标移动

document.onmousemove = function(e) {

// 取得鼠标移动时的坐标位置

mouseX = e.clientX;

mouseY = e.clientY;

// 更新 box 尺寸

if(document.getElementById("box") !== null) {

if( mouseX < startX && mouseY < startY ){

box.style.left=mouseX+'px'

box.style.top=mouseY+'px'

box.style.width = startX - mouseX + 'px';

box.style.height = startY - mouseY + 'px';

}

if( mouseX > startX && mouseY < startY){

box.style.left=startX+'px'

box.style.top=mouseY+'px'

box.style.width = mouseX - startX + 'px';

box.style.height = startY - mouseY + 'px';

}

if( mouseX < startX && mouseY > startY){

box.style.left = mouseX+'px';

box.style.top = startY+'px'

box.style.width = startX - mouseX + 'px';

box.style.height = mouseY - startY + 'px';

}

if( mouseX > startX && mouseY > startY ){

box.style.width = mouseX - startX + 'px';

box.style.height = mouseY - startY + 'px';

}

}

}

// 鼠标抬起

document.onmouseup = function(e) {

document.body.removeChild(box);

}

</script>

</head>

<body>

</body>

</html>