SOURCE

console 命令行工具 X clear

                    
>
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;
}