?

以下方式的劣勢(shì)就是在放棄拖拽那一刻會(huì)觸發(fā)click事件，通常如果被拖拽元素還有其他點(diǎn)擊事件，會(huì)重復(fù)觸發(fā)，往往并非業(yè)務(wù)需求。優(yōu)勢(shì)就是…額…貌似這段代碼沒(méi)什么屌優(yōu)勢(shì)！?

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

HTML5為所有HTML元素規(guī)定了一個(gè)draggable屬性，表示元素是否可以拖動(dòng)，圖像和鏈接的draggable屬性自動(dòng)被設(shè)置成了true，而其他元素這個(gè)屬性的默認(rèn)值都是false。

[注意] Angular下必須設(shè)置draggable='true'才能生效，只設(shè)置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原生實(shí)現(xiàn)拖拽效果drag(sel) {var dragged = typeof sel === "string" ? document.querySelector(sel) : sel;// 點(diǎn)擊某物體時(shí)，用drag對(duì)象即可，move和up是全局區(qū)域，// 也就是整個(gè)文檔通用，應(yīng)該使用document對(duì)象而不是drag對(duì)象(否則，采用drag對(duì)象時(shí)物體只能往右方或下方移動(dòng))dragged.onmousedown = function(event) {var event = event || window.event; //兼容IE瀏覽器// 鼠標(biāo)點(diǎn)擊物體那一刻相對(duì)于物體左側(cè)邊框的距離=點(diǎn)擊時(shí)的位置相對(duì)于瀏覽器最左邊的距離-物體左邊框相對(duì)于瀏覽器最左邊的距離var diffX = event.clientX - dragged.offsetLeft;var diffY = event.clientY - dragged.offsetTop;if (typeof dragged.setCapture !== "undefined") {dragged.setCapture();//防止拖拽的時(shí)候鼠標(biāo)離開(kāi)了div范圍就沒(méi)辦法移動(dòng)了}
//這個(gè)地方一般不建議直接用document，最好用document.querySelector("容器"),以免和其他子元素的onmousemove沖突,但是務(wù)必確保移動(dòng)范圍是在容器范圍內(nèi)，否則出界就無(wú)法移動(dòng)了document.onmousemove = function(event) {dragged.setAttribute("dragging", "true"); //拖拽過(guò)程變成虛線的樣子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";//上下拖拽};
//這個(gè)地方一般不建議直接用document，最好用document.querySelector("容器"),以免和其他子元素的onmouseup沖突,但是務(wù)必確保移動(dòng)范圍是在容器范圍內(nèi)，否則出界就無(wú)法松開(kāi)了document.onmouseout = document.onmouseup = function(event) {dragged.removeAttribute("dragging"); //取消虛線樣式this.onmousemove = null;this.onmouseup = null;//修復(fù)低版本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;}
}

總結(jié)

以上是生活随笔為你收集整理的【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。