1.先看预览
2.几个关键点
1).鼠标事件ClientX,和ClintY距离X轴和Y轴的距离,
2).距离当前点击的偏移offsetLeft,offsetTop,防止鼠标偏移
3)新增新的元素需要重新赋值属性
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../reset.css"/>
<style>
body {
background-color: #CCCCCC;
font-family: 华文行楷;
}
.tips {
width: 150px;
height: auto;
background-color: #FFF4AF;
border-radius: 3px;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
display: flex;
flex-wrap: wrap;
position: absolute;
}
.tips .tips_title {
display: flex;
justify-content: space-between;
width: 100%;
height: 18px;
background-color: #E4BE32;
color: black;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.tips .tips_title div:nth-of-type(1) {
margin-right: auto;
font-weight: bold;
height: 100%;
font-size: 8px;
line-height: 18px;
margin-left: 10px;
}
.tips .tips_title div:nth-of-type(2) {
cursor: pointer;
margin-right: 3px;
font-size: 9px;
line-height: 18px;
}
.tips .tips_title div:nth-of-type(2):active {
color: red;
}
.tips .tips_cxt {
width: 100%;
align-self: start;
height: 160px;
outline: none;
border: none;
font-size: 8px;
padding-top: 5px;
padding-left: 2px;
padding-right: 2px;
color: #3468cf;
letter-spacing: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tips .tips_bottom {
display: grid;
grid-template-columns: 1fr 1fr;
align-self: end;
width: 100%;
background-color: #E4BE32;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.tips .tips_bottom div {
text-align: center;
font-size: 8px;
height: 18px;
line-height: 18px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div id="tips" class="tips">
<div id="tips_title" class="tips_title">
<div>便签</div>
<div id="close">×</div>
</div>
<div class="tips_cxt" contenteditable></div>
<div class="tips_bottom">
<div id="add">新增笔记</div>
<div id="clean">清空笔记</div>
</div>
</div>
<script>
const tips = document.getElementsByClassName('tips')[0]
addTipsEvent(tips)
let z = 0;
function addTipsEvent(tips) {
// const tips = document.getElementsByClassName('tips')[0]
const tips_title = tips.children[0]
const tips_cxt = tips.children[1]
const tips_bottom = tips.children[2]
console.log("tips:" + tips)
console.log("tips_title:" + tips_title)
console.log("tips_cxt:" + tips_cxt)
console.log("tips_bottom:" + tips_bottom)
tips.onclick = () => {
z += 1;
tips.style.zIndex = z;
}
tips_title.onmousedown = (evn) => {
const needX = evn.clientX - tips.offsetLeft
const needY = evn.clientY - tips.offsetTop
document.onmousemove = (ev) => {
const x = ev.clientX - needX
const y = ev.clientY - needY
tips.style.left = x + 'px'
tips.style.top = y + 'px'
console.log(x, y)
}
document.onmouseup = () => {
document.onmousemove = null
}
}
const add = tips_bottom.children[0]
add.onclick = () => {
const newNode = document.createElement('div')
newNode.className = 'tips'
newNode.innerHTML = tips.innerHTML
document.body.appendChild(newNode)
addTipsEvent(newNode)
}
const tips_title_close = tips_title.children[1]
tips_title_close.onclick = () => {
tips.remove()
}
const clean = tips_bottom.children[1]
clean.onclick = () => {
console.log("清除")
tips_cxt.innerHTML = ''
}
}
</script>
</body>
</html>