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

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _vue = require('vue');

var _vue2 = _interopRequireDefault(_vue);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

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);
};

exports['default'] = DragDirective;