v-drag 彈框拖拽的實現
阿新 • • 發佈:2021-07-31
directives: { drag: { mounted: function (el) { el.onmousedown = function(e1) { let disx = e1.pageX - el.parentElement.offsetLeft; let disy = e1.pageY - el.parentElement.offsetTop; e1.stopPropagation(); document.onmousemove = function (e) { let dx = e.pageX - disx let dy = e.pageY - disy // console.log(dx,dy,'before') // width: 644px; // height: 486px; // window.innerHeight: 937 // window.innerWidth: 1920
// 拖拽範圍根據實際情況去寫 if(dx < 0){ dx = 0 } if(dx > window.innerWidth - 644 - 52){ dx = window.innerWidth - 644 - 52 } if(dy > window.innerHeight - 486 - 52){ dy = window.innerHeight - 486 - 52 } if(dy < 0){ dy = 0 } // console.log(dx,dy,'after') el.parentElement.style.left = `${dx}px`; el.parentElement.style.top = `${dy}px`; e.stopPropagation(); }; document.onmouseup = function(e) { // eslint-disable-next-line no-multi-assign document.onmousemove = document.onmouseup = null; e.stopPropagation(); }; } } } }