摘要:实现元素拖拽被移动元素必须为绝对定位待拖拽元素是否激活拖拽状态鼠标按下时相对于选中元素的位移监听鼠标按下事件激活拖拽状态鼠标按下时和选中元素的坐标偏移坐标鼠标按下时和选中元素的坐标偏移坐标监听鼠标放开事件监听鼠标移动事件
js实现元素拖拽
被移动元素必须为绝对定位
position:absolute;Dom
Javasrtipt
var moveElem = document.querySelector(".move"); //待拖拽元素 var dragging; //是否激活拖拽状态 var tLeft, tTop; //鼠标按下时相对于选中元素的位移 //监听鼠标按下事件 document.addEventListener("mousedown", function(e) { if (e.target == moveElem) { dragging = true; //激活拖拽状态 var moveElemRect = moveElem.getBoundingClientRect(); tLeft = e.clientX - moveElemRect.left; //鼠标按下时和选中元素的坐标偏移:x坐标 tTop = e.clientY - moveElemRect.top; //鼠标按下时和选中元素的坐标偏移:y坐标 } }); //监听鼠标放开事件 document.addEventListener("mouseup", function(e) { dragging = false; }); //监听鼠标移动事件 document.addEventListener("mousemove", function(e) { if (dragging) { var moveX = e.clientX - tLeft, moveY = e.clientY - tTop; moveElem.style.left = moveX + "px"; moveElem.style.top = moveY + "px"; } });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82018.html
摘要:原生实现对元素的拖拽一背景介绍此处为铺垫内容,可跳过随着前端的不断发展,各种各样的前端规范和新知识新技术层出不穷,极大地拓展了开发者的操作空间,也大大地提升了用户体验。 原生 JS 实现对 html 元素的拖拽 一、背景介绍 【此处为铺垫内容,可跳过】 随着 Web 前端的不断发展,各种各样的前端规范和新知识、新技术层出不穷,极大地拓展了开发者的操作空间,也大大地提升了用户体验。而随着...
摘要:原生实现对元素的拖拽一背景介绍此处为铺垫内容,可跳过随着前端的不断发展,各种各样的前端规范和新知识新技术层出不穷,极大地拓展了开发者的操作空间,也大大地提升了用户体验。 原生 JS 实现对 html 元素的拖拽 一、背景介绍 【此处为铺垫内容,可跳过】 随着 Web 前端的不断发展,各种各样的前端规范和新知识、新技术层出不穷,极大地拓展了开发者的操作空间,也大大地提升了用户体验。而随着...
摘要:涉及部分的,不会对理解全局产生干扰。在上监听事件,当为画布时,通过创建一个蓝色虚线框移动的时候,更新的位置在上监听事件,落在画布时,创建一个的节点从而完成整个拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...
摘要:涉及部分的,不会对理解全局产生干扰。在上监听事件,当为画布时,通过创建一个蓝色虚线框移动的时候,更新的位置在上监听事件,落在画布时,创建一个的节点从而完成整个拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...
阅读 3069·2021-11-24 11:14
阅读 3477·2021-11-22 15:22
阅读 3199·2021-09-27 13:36
阅读 710·2021-08-31 14:29
阅读 1327·2019-08-30 15:55
阅读 1751·2019-08-29 17:29
阅读 1142·2019-08-29 16:24
阅读 2399·2019-08-26 13:48