可拖动组件 v-drag vue

Veranew

已于 2022-10-13 13:42:12 修改

阅读量537

点赞数

文章标签： vue.js javascript 前端

于 2022-10-13 13:19:53 首次发布

本文链接：https://blog.csdn.net/Veranew/article/details/127299466

版权

本文介绍了如何在Vue.js中创建一个可拖动的组件，并解决在实现拖动功能时，拖动事件与点击事件冲突的问题，确保点击仍能正常触发页面跳转。

摘要由CSDN通过智能技术生成

拖动元素的组件

<template>
  <div class="btn" v-drag>
    <img src="图片地址" alt="" srcset="" />
  </div>
</template>

<script>
export default {
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let oDiv = el; // 获取当前元素
        oDiv.ontouchstart = (e) => {
          // 拖动元素不影响页面其他的滚动
          e.preventDefault();
          // 算出鼠标相对元素的位置
          let disX = e.changedTouches[0].clientX - oDiv.offsetLeft;
          let disY = e.changedTouches[0].clientY - oDiv.offsetTop;

          document.ontouchmove = (e) => {
            // 拖动元素不影响页面其他的滚动
            e.preventDefault();
           
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.changedTouches[0].clientX - disX;
            let top = e.changedTouches[0].clientY - disY;
			// 获取屏幕宽高
			let screenWidth = window.screen.w