首页 > 【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生�

【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生�

 

以下方式的劣势就是在放弃拖拽那一刻会触发click事件，通常如果被拖拽元素还有其他点击事件，会重复触发，往往并非业务需求。优势就是…额…貌似这段代码没什么屌优势！ 

HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动，图像和链接的draggable属性自动被设置成了true，而其他元素这个属性的默认值都是false。

[注意] Angular下必须设置draggable='true'才能生效，只设置draggable不起作用

    // 初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll(".dragged");for (var i = 0, len = arr.length; i < len; i++) {var a = arr[i];this.drag(a);}},// js原生实现拖拽效果drag(sel) {var dragged = typeof sel === "string" ? document.querySelector(sel) : sel;// 点击某物体时，用drag对象即可，move和up是全局区域，// 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)dragged.onmousedown = function(event) {var event = event || window.event; //兼容IE浏览器// 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离var diffX = event.clientX - dragged.offsetLeft;var diffY = event.clientY - dragged.offsetTop;if (typeof dragged.setCapture !== "undefined") {dragged.setCapture();//防止拖拽的时候鼠标离开了div范围就没办法移动了}
//这个地方一般不建议直接用document，最好用document.querySelector("容器"),以免和其他子元素的onmousemove冲突,但是务必确保移动范围是在容器范围内，否则出界就无法移动了document.onmousemove = function(event) {dragged.setAttribute("dragging", "true"); //拖拽过程变成虚线的样子var event = event || window.event;var x = event.clientX - diffX;var y = event.clientY - diffY;if (x < 0) {x = 0;} else if (x > window.innerWidth - dragged.offsetWidth) {x = window.innerWidth - dragged.offsetWidth;}if (y < 0) {y = 0;} else if (y > window.innerHeight - dragged.offsetHeight) {y = window.innerHeight - dragged.offsetHeight;}dragged.style.left = x + "px";//左右拖拽dragged.style.top = y + "px";//上下拖拽};
//这个地方一般不建议直接用document，最好用document.querySelector("容器"),以免和其他子元素的onmouseup冲突,但是务必确保移动范围是在容器范围内，否则出界就无法松开了document.onmouseout = document.onmouseup = function(event) {dragged.removeAttribute("dragging"); //取消虚线样式this.onmousemove = null;this.onmouseup = null;//修复低版本ie bugif (typeof dragged.releaseCapture != "undefined") {dragged.releaseCapture();}};};},
.dragged { transition: none !important;/*禁止选中文本*/-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;cursor: grab;&:active {z-index: 1;cursor: grabbing;opacity: .618;}&[dragging] {cursor: grabbing;background: white !important;border: 1px dashed gray !important;color: gray !important;opacity: 0.9 !important;transform: translate(-3px, -3px);box-shadow: 5px 10px 0 rgba(0, 0, 0, 0.05);}&[animate] {transition: 0.618s ease;}
}

更多相关：

©2024 11GX.COM