drag.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = {
  6. bind: function bind(el, binding, vnode) {
  7. if (el.querySelector(".el-dialog__header") && el.querySelector(".el-dialog")) {
  8. var dialogHeaderEl = el.querySelector(".el-dialog__header");
  9. var dragDom = el.querySelector(".el-dialog");
  10. dialogHeaderEl.style.cssText += ";cursor:move;";
  11. dragDom.style.cssText += ";top:0;";
  12. var getStyle = function () {
  13. if (window.document.currentStyle) {
  14. return function (dom, attr) {
  15. return dom.currentStyle[attr];
  16. };
  17. } else {
  18. return function (dom, attr) {
  19. return getComputedStyle(dom, false)[attr];
  20. };
  21. }
  22. }();
  23. dialogHeaderEl.onmousedown = function (e) {
  24. var disX = e.clientX - dialogHeaderEl.offsetLeft;
  25. var disY = e.clientY - dialogHeaderEl.offsetTop;
  26. var dragDomWidth = dragDom.offsetWidth;
  27. var dragDomHeight = dragDom.offsetHeight;
  28. var screenWidth = document.body.clientWidth;
  29. var screenHeight = document.body.clientHeight;
  30. var minDragDomLeft = dragDom.offsetLeft;
  31. var maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
  32. var minDragDomTop = dragDom.offsetTop;
  33. var maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight;
  34. var styL = getStyle(dragDom, "left");
  35. var styT = getStyle(dragDom, "top");
  36. if (styL.includes("%")) {
  37. styL = +document.body.clientWidth * (+styL / 100);
  38. styT = +document.body.clientHeight * (+styT / 100);
  39. } else {
  40. styL = +styL.replace(/\px/g, "");
  41. styT = +styT.replace(/\px/g, "");
  42. }
  43. document.onmousemove = function (e) {
  44. var left = e.clientX - disX;
  45. var top = e.clientY - disY;
  46. if (-left > minDragDomLeft) {
  47. left = -minDragDomLeft;
  48. } else if (left > maxDragDomLeft) {
  49. left = maxDragDomLeft;
  50. }
  51. if (-top > minDragDomTop) {
  52. top = -minDragDomTop;
  53. } else if (top > maxDragDomTop) {
  54. top = maxDragDomTop;
  55. }
  56. dragDom.style.cssText += ";left:" + (left + styL) + "px;top:" + (top + styT) + "px;";
  57. vnode.child.$emit("dragDialog");
  58. };
  59. document.onmouseup = function (e) {
  60. document.onmousemove = null;
  61. document.onmouseup = null;
  62. };
  63. };
  64. }
  65. }
  66. };