标签：style Selection 自定义 Demo px selectionEl selectionRect evt selectionShow
选区主要设计
- Selection 的 UI
- Selection 的 Rect(width,height) 变化
- Selection 的 Position 变化
- 在浏览器的 DOM 中，Selection 在鼠标点击位置的垂直线右侧变化于左侧变化的计算
Demo 演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: #eee;
}
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
.main {
background-color: white;
box-shadow: 0 2px 4px 0px #333;
width: 960px;
height: 720px;
padding: 20px 40px;
}
.wrapper {
margin: 0 auto;
width: 960px;
height: 720px;
position: relative;
}
.selection {
border: 1px #33a3dc solid;
background-color: #33a3dc;
opacity: 0.3;
display: none;
position: fixed;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main" id="main">
<div class="paragraph">你好啊</div>
</div>
<div class="selection" id="selection"></div>
</div>
<script>
let selectionShow = false;
let selectionRect = {
x: 0,
y: 0,
w: 0,
h: 0,
};
let mainEl = document.getElementById("main");
let eventContext = window;
function redrawSelection() {
let selectionEl = document.getElementById("selection");
if (!selectionShow) {
selectionEl.style.display = selectionShow
? "block"
: "none";
} else {
selectionEl.style.display = selectionShow
? "block"
: "none";
}
let mainElOffsetX = 0; //mainEl.getBoundingClientRect().x;
let mainElOffsetY = 0;
if (selectionRect.w < 0) {
selectionEl.style.left =
mainElOffsetX +
selectionRect.x +
selectionRect.w +
"px";
selectionEl.style.width = Math.abs(selectionRect.w) + "px";
} else {
selectionEl.style.left =
mainElOffsetX + selectionRect.x + "px";
selectionEl.style.width = selectionRect.w + "px";
}
if (selectionRect.h < 0) {
selectionEl.style.top =
mainElOffsetY +
selectionRect.y +
selectionRect.h +
"px";
selectionEl.style.height = Math.abs(selectionRect.h) + "px";
} else {
selectionEl.style.top =
mainElOffsetY + selectionRect.y + "px";
selectionEl.style.height = selectionRect.h + "px";
}
}
eventContext.addEventListener("mousedown", function (evt) {
selectionShow = true;
console.log("mousedown", evt);
selectionRect.x = evt.clientX;
selectionRect.y = evt.clientY;
redrawSelection();
});
eventContext.addEventListener("mousemove", function (evt) {
if (selectionShow) {
console.log("mousemove", evt);
selectionRect.w = evt.clientX - selectionRect.x;
selectionRect.h = evt.clientY - selectionRect.y;
redrawSelection();
}
});
eventContext.addEventListener("mouseup", function (evt) {
selectionShow = false;
redrawSelection();
});
</script>
</body>
</html>
体验地址
https://codesandbox.io/s/autumn-voice-4ghxn?file=/index.html
标签：style,Selection,自定义,Demo,px,selectionEl,selectionRect,evt,selectionShow 来源： https://blog.csdn.net/terrychinaz/article/details/121419965
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。