?

<div class='dragged'></div>

    //初始化需要拖拽的列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;dragged.draggable = true; //開啟拖拽屬性(不加這句話拖不動)// 開始拖拽dragged.ondragstart = function(event) {var event = event || window.event; //兼容IE瀏覽器// 鼠標點擊物體那一刻相對于物體左側邊框的距離=點擊時的位置相對于瀏覽器最左邊的距離-物體左邊框相對于瀏覽器最左邊的距離this.diffX = event.clientX - this.offsetLeft;this.diffY = event.clientY - this.offsetTop;};//拖拽中…dragged.ondrag = function(event) {this.setAttribute("dragging", "true"); //拖拽過程變成虛線的樣子var event = event || window.event;var x = event.clientX - this.diffX;var y = event.clientY - this.diffY;if (x < 0) {x = 0;} else if (x > innerWidth - this.offsetWidth) {x = innerWidth - this.offsetWidth;}if (y < 0) {y = 0;} else if (y > innerHeight - this.offsetHeight) {y = innerHeight - this.offsetHeight;}this.style.left = x + "px"; //左右拖拽this.style.top = y + "px"; //上下拖拽};//拖拽結束dragged.ondragend = function(event) {this.removeAttribute("dragging"); //取消虛線樣式};},

.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 !important;&:active {z-index: 1;cursor: grabbing !important;opacity: .618;}&[dragging] {cursor: grabbing !important;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;}
}

總結

以上是生活随笔為你收集整理的【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）的全部內容，希望文章能夠幫你解決所遇到的問題。

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