拖拽图片到任意位置
<img v-drag id="img" draggable="false" @contextmenu.prevent src="../assets/image/IP.png" class="img" > directives: { drag: { // 指令的定义 bind: function(el) { // 获取当前元素 let oDiv = el; oDiv.onmousedown = (e) => { // 算出鼠标相对元素的位置 let disX = e.clientX - oDiv.offsetLeft ; let disY = e.clientY - oDiv.offsetTop ; document.onmousemove = (e) => { // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; oDiv.style.left = left + 'px'; oDiv.style.top = top + 'px'; }; document.onmouseup = () => { console.log(11) document.onmousemove = null; document.onmouseup = null; } } } } } .img { position: absolute; width: 120px; float: left; height: 120px; bottom: 0px; right: 0; z-index: 88; }
愿你笑时风华正茂
浙公网安备 33010602011771号