自定义拖拽指令（移动端）

落魄的小前端

已于 2022-03-18 08:36:31 修改

阅读量372

点赞数 2

文章标签： javascript vue.js 前端

于 2022-03-18 08:36:00 首次发布

本文链接：https://blog.csdn.net/z12845464/article/details/123565466

版权

博主尤雨海分享了一段Vue自定义拖拽指令的代码，该指令使得元素可以在屏幕上自由拖动，并限制其在屏幕边界内。通过监听touchstart、touchmove和touchend事件，实现了元素的移动功能。代码简洁实用，方便开发者快速应用到项目中。

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

前言

大家好，我是尤雨海。。。。。。

每次写自定义拖拽指令觉得从头写太麻烦，我自己的上传了一个简单的npm包，大家可以用一下。这是网址：

npm包地址

一、完整代码

Vue.directive("drag", {
  inserted: function (el) {
    let flags = false;
    el.ontouchstart = function (e) {
      e.preventDefault();
      flags = true;
      el.style.position = "fixed";
      let touch = e.touches[0];
      let x = touch.clientX - el.offsetLeft;
      let y = touch.clientY - el.offsetTop;
      let screenWidth = window.screen.width;
      let screenHeight = window.screen.height;
      let maxX = screenWidth - el.offsetWidth;
      let maxY = screenHeight - el.offsetHeight;
      document.ontouchmove = function (e) {
        e.preventDefault();
        if (flags) {
          let touch = e.touches[0];
          let left = touch.clientX - x;
          let top = touch.clientY - y;
          // console.log(top.left)
          if (left <= 0) {
            left = 0;
          } else if (left >= maxX) {
            left = maxX;
          }
          if (top <= 0) {
            top = 0;
          } else if (top >= maxY) {
            top = maxY;
          }
          el.style.left = left + "px";
          el.style.top = top + "px";
        }
      };
      document.ontouchend = function () {
        flags = false;
      };
    };
  },
});