原生js拖拽元素(onmouseup不能夠觸發的原因)
阿新 • • 發佈:2020-08-14
我們經常會遇見拖拽某一個元素的場景,拖拽也是很常用的; 這次拖拽遇見一個問題,有時在拖拽的時候嗎,滑鼠鬆開,元素仍然可以拖拽; 經過查閱資料,發現: 會觸發H5原生的拖拽事件。並且不會監聽到onmouseup, 從而導致滑鼠鬆開也能夠拖拽。 解決辦法就是直接幹掉H5的拖拽事件 document.ondragstart = function(ev) { ev.preventDefault(); }; document.ondragend = function(ev) { ev.preventDefault(); }; onmouseup不能夠觸發的原因:https://blog.csdn.net/z467469274/article/details/77332830?utm_source=blogxgwz2 拖拽講解 https://blog.csdn.net/weixin_41910848/article/details/82218243
<div class="box" id="drag"></div>
<script type="text/javascript"> window.onload = function(){ var drag = document.getElementById('drag'); // //點選某物體時,用drag物件即可,move和up是全域性區域, // 也就是整個文件通用,應該使用document物件而不是drag物件(否則,採用drag物件時物體只能往右方或下方移動) // 按下 drag.onmousedown = function(event){ console.log("drag按下的時候觸發 " , ) var event = event || window.event; //相容IE瀏覽器 // 滑鼠點選物體那一刻相對於物體左側邊框的距離=點選時的位置相對於瀏覽器最左邊的距離-物體左邊框相對於瀏覽器最左邊的距離 var diffX = event.clientX - drag.offsetLeft; var diffY = event.clientY - drag.offsetTop; if(typeof drag.setCapture !== 'undefined'){ drag.setCapture(); } // 移動 document.onmousemove = function(event){ var event = event || window.event; var moveX = event.clientX - diffX; var moveY = event.clientY - diffY; if(moveX < 0){ moveX = 0 }else if(moveX > window.innerWidth - drag.offsetWidth){ moveX = window.innerWidth - drag.offsetWidth } if(moveY < 0){ moveY = 0 }else if(moveY > window.innerHeight - drag.offsetHeight){ moveY = window.innerHeight - drag.offsetHeight } drag.style.left = moveX + 'px'; drag.style.top = moveY + 'px' } // 抬起停止移動 document.onmouseup = function(event){ console.log( "抬起停止移動" ) this.onmouseup = null; this.onmousemove = null; //修復低版本ie bug if(typeof drag.releaseCapture!='undefined'){ drag.releaseCapture(); } } // 解決有些時候,在滑鼠鬆開的時候,元素仍然可以拖動; document.ondragstart = function(ev) { ev.preventDefault(); console.log(1212) }; document.ondragend = function(ev) { ev.preventDefault(); console.log("asd") }; } } </script>
如果你是vue的話,封裝改方法
Vue.prototype.dragandDrop=function(ele){ var drag = document.getElementById(ele); // //點選某物體時,用drag物件即可,move和up是全域性區域, // 也就是整個文件通用,應該使用document物件而不是drag物件(否則,採用drag物件時物體只能往右方或下方移動) drag.onmousedown = function(event){ var event = event || window.event; //相容IE瀏覽器 //滑鼠點選物體那一刻相對於物體左側邊框的距離=點選時的位置相對於瀏覽器最左邊的距離-物體左邊框相對於瀏覽器最左邊的距離 var diffX = event.clientX - drag.offsetLeft; var diffY = event.clientY - drag.offsetTop; if(typeof drag.setCapture !== 'undefined'){ drag.setCapture(); } if(event.stopPropagation) event.stopPropagation(); if(event.preventDefault) event.preventDefault(); document.onmousemove = function(event){ var event = event || window.event; var moveX = event.clientX - diffX; var moveY = event.clientY - diffY; if(moveX < 0){ moveX = 0 }else if(moveX > window.innerWidth - drag.offsetWidth){ moveX = window.innerWidth - drag.offsetWidth } if(moveY < 0){ moveY = 0 }else if(moveY > window.innerHeight - drag.offsetHeight){ moveY = window.innerHeight - drag.offsetHeight } drag.style.left = moveX + 'px'; drag.style.top = moveY + 'px' } } } // 抬起方法(拖拽停止) Vue.prototype.stop=function(ele){ console.log(11); document.onmouseup = function(event){ var event = event || window.event; //相容IE瀏覽器 if(event.stopPropagation) event.stopPropagation();//這個可以刪除 if(event.preventDefault) event.preventDefault();//這個可以刪除 console.log( " this.onmousemove", this.onmousemove); this.onmousemove = null; this.onmouseup = null; } }
使用
<rich-text class="rich-text-com" id="richdragIndex" @aaa="down" @bbb="upuo"></rich-text>
<script>
// 解決有些時候,在滑鼠鬆開的時候,元素仍然可以拖動;
document.ondragstart = function(ev) {
ev.preventDefault();
};
document.ondragend = function(ev) {
ev.preventDefault();
};
export default {
data(){
return{
}
},
methods:{
down(){
console.log("ppp");
this.dragandDrop("richdragIndex");
},
upuo(){
console.log("觸發抬起");
this.stop("richdragIndex")
}
}
}