vue |
您所在的位置：网站首页 › flash动画演示中中用鼠标拖动伸缩的是什么元件 › vue |
vue
|
实现对div的拖动功能，需要先要知道以下的一些原生事件和方法； 1，事件: 方法描述onmousedown鼠标按钮被按下onmousemove鼠标被移动onmouseup鼠标按键被松开2，方法: 方法描述event.clientX返回当事件被触发时鼠标指针相对于浏览器页面（或窗口）的水平坐标event.clientY同上，返回的是垂直坐标event.offsetLeft只读属性，返回当前元素左边框距定位元素(或者最近的元素) 左侧的像素值event.offsetTop只读属性，返回当前元素上边框距定位元素(或者最近的元素) 顶部的像素值event.clientHeight只读属性，返回该元素的像素高度，高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条，是一个整数，单位是像素 pxevent.clientWidth同上，返回该元素的像素宽度event.offsetHeight只读属性，它返回该元素的像素高度，高度包含内边距（padding）和边框（border），不包含外边距（margin），是一个整数，单位是像素 pxevent.offsetWidth同上，返回该元素的像素宽度注意：clientHeight ，clientWidth 和 offsetHeight offsetWidth 获取元素高度宽度的尺寸不太一样，我这边使用的的 offsetHeight offsetWidth； 图例说明：
实现的效果图如下：
3，实现如下： 重要说明： 1，mousedown() 鼠标按下时需要计算位置差，因为clientX和offsetLeft的属性返回的位置不一样 要相减得到鼠标在拖动元素内实际点击的位置， 后面每一次拖动时都要减去这个差值 否则就会造成你拖动的位置一直都是元素的左上角 而不是你之前点击的位置； 2，onmousemove ()鼠标移动事件和onmouseup 鼠标抬起事件要添加到 document 元素上面，因为在拖动的过程中如果拖动过快，鼠标移出了拖动元素，导致拖动元素丢失了移动事件； 3，拖动限制范围的判断建议使用第二种方法，第一种我这边演示的时候发现div靠边时经常会有间隙，不太流畅； 4，onmouseup鼠标抬起时需要解绑鼠标移动事件； drag.vue export default { name: "dragContainerEl", data() { return { DragEl: null,//拖动元素 dragContainerEl: null,//容器元素 // 位置差 disX: 0, disY: 0, // 元素未拖动时的初始位置 绑定的是行内样式 styleObj: { left: 0, top: 0 } }; }, mounted() { this.DragEl = document.getElementById("Drag"); this.dragContainerEl = document.getElementsByClassName("dragContainerEl")[0]; }, methods: { /* 鼠标按下 */ mousedown(event) { // 1,计算位置差 // 因为clientX和offsetLeft的属性返回的位置不一样 要相减得到鼠标在拖动元素内实际点击的位置 // 后面每一次拖动时都要减去这个差值 否则就会造成你拖动的位置一直都是元素的左上角 而不是你之前点击的位置 this.disX = event.clientX - this.DragEl.offsetLeft; this.disY = event.clientY - this.DragEl.offsetTop; //2， 获取拖动元素的高度和容器的高度 为了下面进行限制元素拖动的范围 let dragHeight = this.DragEl.offsetHeight; let dragWidth = this.DragEl.offsetWidth; let dragContainerWidth = this.dragContainerEl.offsetWidth; //获取容器的高度和宽度 let dragContainerHeight = this.dragContainerEl.offsetHeight; // 添加鼠标移动事件 document.onmousemove = (el) => { // 3，获取鼠标移动位置 let moveX = el.clientX - this.disX; let moveY = el.clientY - this.disY; // 4，限制拖动 //控制范围：在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了 4.1第一种 限制范围的判断 // if(moveX = dragContainerHeight - dragHeight){ // return // } 4.2 第二种限制方位的判断 建议使用第二种； 第一种靠边时经常会有边距，不太丝滑 // 左边界 if (moveX = dragContainerWidth - dragWidth) { moveX = dragContainerWidth - dragWidth; } // 5, 开始移动 this.DragEl.style.left = moveX + "px"; this.DragEl.style.top = moveY + "px"; }; /* 6，鼠标抬起解除事件 */ document.onmouseup = () => { document.onmousemove = null; }; } } }; .dragContainerEl { position: relative; width: 100%; height: 100%; border: 1px solid red; } .drag { position: absolute; width: 50px; height: 50px; border: 5px solid yellowgreen; background-color: red; text-align: center; } |
【本文地址】
今日新闻 |
推荐新闻 |