iep-ui/es/webRtc/directive/drag.js

An enterprise-class UI design language and Vue-based implementation

import Vue from 'vue';
var DragDirective = {
  name: 'DragBox',
  inserted: function inserted(el, binding) {
    el.onmousedown = function (e) {
      e.stopPropagation();
      e.preventDefault();
      var disX = e.pageX - el.offsetLeft;
      var disY = e.pageY - el.offsetTop;
      var winWidth = document.body.clientWidth;
      var winHeight = document.body.clientHeight;
      document.onmousemove = function (moveEvent) {
        var elWidth = el.clientWidth;
        var elHeight = el.clientHeight;
        var touchX = moveEvent.pageX - disX;
        var touchY = moveEvent.pageY - disY;
        if (touchX - elWidth * 0.5 < 0) {
          touchX = elWidth * 0.5;
        }
        if (touchX > winWidth - elWidth * 0.5) {
          touchX = winWidth - elWidth * 0.5;
        }

        if (touchY - elHeight * 0.5 < 0) {
          touchY = elHeight * 0.5;
        }
        if (touchY > winHeight - elHeight * 0.5) {
          touchY = winHeight - elHeight * 0.5;
        }
        el.style.left = touchX + 'px';
        el.style.top = touchY + 'px';
        // if (binding.arg === 2) {
        //
        // }
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    };
  }
};

DragDirective.install = function (Vue) {
  Vue.directive(DragDirective.name, DragDirective);
};

export default DragDirective;