此處例子獲取的盒子(div)為 element-ui 的 dialog 組件

青銅版（參考）

function moveDialog() {let isDown = false,x = 0,y = 0,left = 0,top = 0,el_dialog = document.querySelector('.el-dialog'),dia_header = el_dialog.querySelector('.el-dialog__header'),dia_footer = el_dialog.querySelector('.el-dialog__footer')// 鼠標按下dia_header.onmousedown = function (e) {// 獲取x坐標和y坐標x = e.clientXy = e.clientY// 獲取左邊和上邊的偏移量left = el_dialog.offsetLefttop = el_dialog.offsetTop// 開關isDown = truedia_header.style.cursor = 'grabbing'}dia_footer.onmousedown = function (e) {// 獲取x坐標和y坐標x = e.clientXy = e.clientY// 獲取左邊和上邊的偏移量left = el_dialog.offsetLefttop = el_dialog.offsetTop// 開關isDown = truedia_footer.style.cursor = 'grabbing'}// 鼠標移動document.onmousemove = function (e) {if (!isDown) return// 移動后位置let nx = e.clientXlet ny = e.clientY// 移動距離let yd_x = x - nxlet yd_y = y - ny// 左右if (yd_x > 0) {if (nx > 100) el_dialog.style.marginLeft = left - yd_x + 'px'} else {if (nx < document.body.clientWidth - 100) el_dialog.style.marginLeft = left + -yd_x + 'px'}// 上下if (yd_y > 0) {if (ny > 30) el_dialog.style.marginTop = top - yd_y + 'px'} else {if (ny < document.body.clientHeight - 30) el_dialog.style.marginTop = top + -yd_y + 'px'}}// 鼠標抬起document.onmouseup = function () {// 開關關閉isDown = falsedia_header.style.cursor = 'grab'dia_footer.style.cursor = 'grab'} }moveDialog()

大佬版（參考）

function moveBox(box, item) {var isDragging = falsevar currentXvar currentYvar initialXvar initialYvar xOffset = 0var yOffset = 0box.addEventListener('mousedown', dragStart)box.addEventListener('mouseup', dragEnd)function dragStart(e) {initialX = e.clientX - xOffsetinitialY = e.clientY - yOffsetif (e.target === item) {isDragging = truedocument.addEventListener('mousemove', drag)}}function dragEnd(e) {initialX = currentXinitialY = currentYisDragging = falsedocument.removeEventListener('mousemove', drag)}function drag(e) {if (isDragging) {e.preventDefault()currentX = e.clientX - initialXcurrentY = e.clientY - initialYxOffset = currentXyOffset = currentYsetTranslate(currentX, currentY, box)}}function setTranslate(xPos, yPos, el) {el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'} }let el_dialog = document.querySelector('.el-dialog') let dia_header = el_dialog.querySelector('.el-dialog__header') moveBox(el_dialog, dia_header)

項目使用版

function moveBox(box, item) {let isDown = false,x,y,newX,newY,ydX,ydY,left = 0,top = 0item.onmousedown = (e) => {item.style.cursor = 'grabbing'x = e.clientXy = e.clientYleft = box.offsetLefttop = box.offsetTopisDown = truedocument.addEventListener('mousemove', drag)}item.onmouseup = (e) => {item.style.cursor = 'grab'isDown = falsedocument.removeEventListener('mousemove', drag)}function drag(e) {if (isDown) {newX = e.clientXnewY = e.clientYydX = newX - xydY = newY - ybox.style.marginLeft = left + ydX + 'px'box.style.marginTop = top + ydY + 'px'}} }let el_dialog = document.querySelector('.el-dialog') let dia_header = el_dialog.querySelector('.el-dialog__header') moveBox(el_dialog, dia_header)

總結

以上是生活随笔為你收集整理的javascript拖动元素(盒子)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。