?

?

<script>
export default {data() {return {drag: {draggedSel: ".girl", //被拖動元素的class或idminY: 46 //頂部navBar的高度}};},created() {},mounted() {this.drag.draggedDiv = document.querySelector(this.drag.draggedSel);this.drag.draggedDiv.addEventListener("touchstart", this.touchstart, {passive: false});this.drag.draggedDiv.addEventListener("touchmove", this.touchmove, {passive: false});this.drag.draggedDiv.addEventListener("touchend", this.touchend, {passive: false});},methods: {// 實現移動端拖拽touchstart() {this.drag.draggedDiv.setAttribute("opacity", true); //透明度降低var touch = event.touches ? event.touches[0] : event;this.drag.cx = touch.clientX;this.drag.cy = touch.clientY;this.drag.x0 = this.drag.draggedDiv.offsetLeft; //記錄初始左偏移量this.drag.y0 = this.drag.draggedDiv.offsetTop; //記錄初始上偏移量},touchmove() {var touch = event.touches ? event.touches[0] : event;//組織默認事件，防止body滑動event.preventDefault();this.drag.x1 = this.drag.x0 + (touch.clientX - this.drag.cx);this.drag.y1 = this.drag.y0 + (touch.clientY - this.drag.cy);this.drag.cw =document.documentElement.clientWidth || document.body.clientWidth;this.drag.ch =document.documentElement.clientHeight || document.body.clientHeight;this.drag.minX = 0;this.drag.maxX = this.drag.cw - this.drag.draggedDiv.offsetWidth;this.drag.maxY = this.drag.ch - this.drag.draggedDiv.offsetHeight;//邊界判斷this.drag.x1 =this.drag.x1 < this.drag.minX ? this.drag.minX : this.drag.x1;this.drag.x1 =this.drag.x1 > this.drag.maxX ? this.drag.maxX : this.drag.x1;this.drag.y1 =this.drag.y1 < this.drag.minY ? this.drag.minY : this.drag.y1;this.drag.y1 =this.drag.y1 > this.drag.maxY ? this.drag.maxY : this.drag.y1;this.drag.draggedDiv.style.left = this.drag.x1 + "px";this.drag.draggedDiv.style.top = this.drag.y1 + "px";},touchend() {this.drag.draggedDiv.removeAttribute("opacity"); //回復透明度//吸附左右邊界var x = this.drag.x1 < this.drag.cw / 2 ? this.drag.minX : this.drag.maxX;var y = this.drag.y1 < this.drag.ch / 2 ? this.drag.minY : this.drag.maxY;var minxDis =this.drag.x1 < this.drag.cw / 2? this.drag.x1 - this.drag.minX: this.drag.maxX - this.drag.x1;var minyDis =this.drag.y1 < this.drag.ch / 2? this.drag.y1 - this.drag.minY: this.drag.maxY - this.drag.y1;if (minxDis < 50 || minyDis < 50) {minxDis < minyDis? (this.drag.draggedDiv.style.left = x + "px"): (this.drag.draggedDiv.style.top = y + "px");}}}
};
</script>

總結

以上是生活随笔為你收集整理的vue下轻松解决模拟微信视频缩略图拖拽→吸附窗口边界的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。