console
const panel = {
el: document.querySelector('.panel'),
isHandle(e) {
const target = e.target
return target.classList.contains('bar')
}
}
panel.area = panel.el.getBoundingClientRect()
let down = {}
let current = null
function getPoint(e) {
return {x: e.clientX, y: e.clientY}
}
function calcPos(oArea, point1, point2) {
const deltaX = point2.x - point1.x
const deltaY = point2.y - point1.y
const left = oArea.left + deltaX
const top = oArea.top + deltaY
return {left, top}
}
document.addEventListener('pointerdown', (e) => {
down = getPoint(e)
if (panel.isHandle(e)) {
current = panel
}
})
document.addEventListener('pointermove', (e) => {
if (current) {
const nextPos = calcPos(current.area, down, getPoint(e))
current.el.style.left = nextPos.left + 'px'
current.el.style.top = nextPos.top + 'px'
}
})
document.addEventListener('pointerup', (e) => {
if (current) {
const nextPos = calcPos(current.area, down, getPoint(e))
current.area.left = nextPos.left + 'px'
current.area.top = nextPos.top + 'px'
current = null
down = {}
}
})
<div class="stage">
<div class="panel">
<div class="bar"></div>
<div class="tab_box">
<div class="tab">
tab1
</div>
<div class="tab">
tab2
</div>
</div>
<div class="content_box">
<div class="content content_active">
content1
</div>
<div class="content">
content2
</div>
</div>
</div>
</div>
.stage {
width: 1200px;
height: 600px;
position: relative;
border: 1px solid #f0f0f0;
background: #f0f0f0;
}
.panel {
position: absolute;
min-width: 200px;
max-height: 200px;
}
.bar {
width: 100%;
height: 12px;
background: #000;
border-radius: 4px;
}
.tab_box::after {
content: '';
display: block;
clear: both;
}
.tab_box {
background: #ddd;
}
.tab {
float: left;
padding: 4px;
color: #555;
}
.content {
display: none;
padding: 4px;
background: #aaa;
}
.content_active {
display: block;
}