vue 自定义指令实现拖动边框变大

最新推荐文章于 2024-08-01 12:56:26 发布

深拥梦＄

最新推荐文章于 2024-08-01 12:56:26 发布

阅读量1.7k

点赞数 3

分类专栏： vue-cli 文章标签： vue vue-cli

vue-cli 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue 自定义指令实现拖动div的边框变大，可以全局引入到main.js里面

Vue.directive('drag', {
  bind: function (el) {
    var eleLeft = $(el).offset().left;
    var isMouseDown = false;
    var borderLen = 2; //左右边框
    el.onmousedown = function (e) {
      var ele = $(el);
      var rightPos = eleLeft + ele.width() + borderLen;
      if (rightPos - 5 <= e.pageX && e.pageX <= rightPos) {
        isMouseDown = true;
        ele.css('cursor', 'e-resize');
      }

      document.onmousemove = function (e) {
        var ele = $(el);
        var rightPos = eleLeft + ele.width() + borderLen;
        if (rightPos - 5 <= e.pageX && e.pageX <= rightPos) {
          ele.css('cursor', 'e-resize');
        } else {
          if (!isMouseDown) {
            ele.css('cursor', 'auto');
          }
        }
        if (isMouseDown) {
          ele.width((e.pageX - eleLeft - borderLen) + 'px');
        }
      };

      document.onmouseup = function (e) {
        e.stopPropagation();
        isMouseDown = false;
      };

    };
  },
  update: function (el) {
    var eleLeft = $(el).offset().left;
    var isMouseDown = false;
    var borderLen = 2; //左右边框
    el.onmousedown = function (e) {
      var ele = $(el);
      var rightPos = eleLeft + ele.width() + borderLen;
      if (rightPos - 5 <= e.pageX && e.pageX <= rightPos) {
        isMouseDown = true;
        ele.css('cursor', 'e-resize');
      }

      document.onmousemove = function (e) {
        var ele = $(el);
        var rightPos = eleLeft + ele.width() + borderLen;
        if (rightPos - 5 <= e.pageX && e.pageX <= rightPos) {
          ele.css('cursor', 'e-resize');
        } else {
          if (!isMouseDown) {
            ele.css('cursor', 'auto');
          }
        }
        if (isMouseDown) {
          ele.width((e.pageX - eleLeft - borderLen) + 'px');
        }
      };

      document.onmouseup = function (e) {
        e.stopPropagation();
        isMouseDown = false;
      };

    };
  }
})