js拖拽位移

    <Button class="saveBtn" type="success" @click="saveTab()">发布</Button>

    <div class="topModelling">
      <div class="camera">
        <span class="cameraBox cameraLeft"></span>
        <span class="cameraBox cameraRight"></span>
      </div>
    </div>

js代码：

绑定监听事件

onMounted(() => {
let topDom = document.getElementsByClassName(‘topModelling’)[0]
let boxDom = document.getElementsByClassName(‘mobilePhoneModel’)[0]
let saveBtnDom = document.getElementsByClassName(‘saveBtn’)[0]
//点击模型顶栏拖拽
topDom.onmousedown = function() {
methods.boxDrag(topDom, boxDom)
}
//点击发布按钮拖拽
saveBtnDom.onmousedown = function() {
document.onmousemove = function() {
methods.boxDrag(topDom, boxDom)
}
document.onmouseup = function() {
document.onmousemove = null
document.onmouseup = null
}
}
})

盒子跟随

boxDrag(topDom, boxDom) {
//计算出元素距离上边和左边的距离（鼠标点击的位置-元素的位置）
// let disX = e.clientX
// let disY = e.clientY
let l
let t
//console.log(‘down’, disX, disY)
document.onmousemove = function(e) {
//鼠标要按住不松开移动，松开触发onmouseup的事件
l = e.clientX - topDom.offsetWidth * 1.2
t = e.clientY - topDom.offsetHeight * 2.5
//console.log(‘move’, l, t, boxDom)
boxDom.style.position = ‘absolute’
boxDom.style.left = l + ‘px’
boxDom.style.top = t + ‘px’
}
document.onmouseup = function() {
document.onmousemove = null
document.onmouseup = null
//console.log(‘up’, l, t)
boxDom.style.position = ‘absolute’
boxDom.style.left = l + ‘px’
boxDom.style.top = t + ‘px’
}
},