vue v-dialogDrag: 彈窗拖拽


Vue.directive('dialogDrag', {
inserted:function(el) {

const dragDom = el.querySelector('.jsPropupLayerHead');
dragDom.style.cursor = 'move';

dragDom.onmousedown = (e) => {
event.stopPropagation();
// 鼠標按下,計算當前元素距離可視區的距離
const disX = e.clientX - el.offsetLeft;
const disY = e.clientY - el.offsetTop;

console.log('disX='+disX)
console.log('disY='+disY)


document.onmousemove = (e)=>{
//用鼠標的位置減去鼠標相對元素的位置,得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//移動當前元素
el.style.left = left + 'px';

el.style.top = top + 'px';




};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};

}
}
})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM