javascript拖动元素(盒子)

此处例子获取的盒子(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拖动元素(盒子)相关推荐

JavaScript学习（三十五）—拖动元素
JavaScript学习(三十五)-拖动元素代码如下: <!DOCTYPE html> <html lang="en"><head><m ...
小折腾：JavaScript与元素间的抛物线轨迹运动
小折腾:JavaScript与元素间的抛物线轨迹运动这篇文章发布于 2013年12月30日,星期一,20:40,归类于 js实例. 阅读 61147 次, 今日 55 次 by zhangxinxu ...
html 获取页面元素高度,浅谈JavaScript获取元素的大小（高度和宽度）的方法
本篇文章给大家介绍一下JavaScript获取元素的大小(高度和宽度)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在 JavaScript 中,使用下面 3 组属性可以获 ...
javascript中元素的scrollLeft和scrollTop属性说明
这两个属性的适用范围: 注意: 这两个属性只能用于元素设置了overflow的css样式中.否则这两个属性没有任何意义. 且overflow的值不能为visible,但可以为hidden,auto,s ...
如何使用JavaScript更改元素的类？
如何使用JavaScript更改HTML元素的类以响应onclick事件? #1楼对以前的正则表达式的一些小注释和调整: 如果班级列表中的班级名称不止一次,您将希望在全局范围内执行此操作. 而且,您 ...
html中元素盒子垂直居中的实现方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Vue实战教程：利用自定义实现鼠标拖动元素效果
一淘模板分享一个Vue实战,介绍下使用Vue的自定义指令实现鼠标拖动元素的效果以及解决移动端适配的问题. 核心属性 Element.clientWidth:元素可视宽度. Element.client ...
子元素padding一般不会撑开父元素盒子大小
padding影响盒子实际大小. (盒子即使有了宽度和高度,此时在指定内边框,会撑大盒子) 如果不指定宽度,块元素随父元素的宽度. 如果子元素不设置宽度或者高度,则子元素的padding值永远不会超出 ...
Javascript通过元素id和name直接获取元素
概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...

javascript拖动元素(盒子)

青铜版（参考）

大佬版（参考）

项目使用版

javascript拖动元素(盒子)相关推荐

最新文章

热门文章