drag.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. // import Vue from 'vue'
  2. import debounce from 'lodash/debounce'
  3. export default function (Vue) {
  4. Vue.directive('drag', {
  5. bind(a, binding) {
  6. let isStart = false; // 是否已经开始拖拽
  7. let distance = {}; // 拖动的距离
  8. let l, t, x, y; // 当前被拖动的距离
  9. let w; // 当前屏幕宽度
  10. let h; // 当前屏幕的高度 // 移动端
  11. const dragElem = a;
  12. let firstTime = '',
  13. lastTime = ''; //记录鼠标按下松开时间
  14. dragElem.addEventListener(
  15. 'touchstart',
  16. function (e) {
  17. isStart = true // 如果没有开始拖拽, 则可以拖拽
  18. if (!e.changedTouches[0]) return;
  19. const {
  20. clientX,
  21. clientY
  22. } = e.changedTouches[0];
  23. x = clientX - e.changedTouches[0].target.x;
  24. y = clientY - e.changedTouches[0].target.y;
  25. w = document.body.clientWidth; // 当前屏幕宽度
  26. h = document.body.clientHeight; // 当前屏幕的高度
  27. }, {
  28. passive: false
  29. }
  30. )
  31. debounce; //防抖
  32. dragElem.addEventListener(
  33. 'touchmove',
  34. debounce(function (e) {
  35. // e.preventDefault()
  36. l = e.changedTouches[0].clientX - x;
  37. t = e.changedTouches[0].clientY - y;
  38. if (l < 0 && t < 0) {
  39. a.style.left = 0 + 'px';
  40. a.style.top = 0 + 'px';
  41. } else if (l < 0 && t + a.clientHeight < h) {
  42. a.style.left = 0 + 'px';
  43. a.style.top = t + 'px';
  44. } else if (l < 0 && t + a.clientHeight >= h) {
  45. a.style.left = 0 + 'px';
  46. a.style.top = h - a.clientHeight + 'px'
  47. } else if (l + a.clientWidth > w && t < 0) {
  48. a.style.left = w - a.clientWidth + 'px';
  49. a.style.top = 0 + 'px';
  50. } else if (l + a.clientWidth < w && t + a.clientHeight >= h) {
  51. a.style.left = l + 'px';
  52. a.style.top = h - a.clientHeight + 'px'
  53. } else if (l + a.clientWidth < w && t < 0) {
  54. a.style.left = l + 'px';
  55. a.style.top = 0 + 'px';
  56. } else if (l + a.clientWidth > w && t + a.clientHeight < h) {
  57. a.style.left = w - a.clientWidth + 'px';
  58. a.style.top = t + 'px';
  59. } else if (l + a.clientWidth > w && t + a.clientHeight >= h) {
  60. a.style.left = w - a.clientWidth + 'px';
  61. a.style.top = h - a.clientHeight + 'px';
  62. } else {
  63. a.style.left = l + 'px';
  64. a.style.top = t + 'px';
  65. }
  66. }, 5), {
  67. passive: false
  68. }
  69. );
  70. dragElem.addEventListener(
  71. 'touchend',
  72. function (e) {
  73. isStart = false
  74. document.ontouchmove = null
  75. document.ontouchmove = null
  76. distance = {
  77. type: 'move',
  78. clientX: x - e.changedTouches[0].clientX, // 拖动的 x 距离
  79. clientY: y - e.changedTouches[0].clientY // 拖动的 y 距离
  80. }
  81. // binding.value(distance) // 返回拖动的距离
  82. }, {
  83. passive: false
  84. }
  85. );
  86. dragElem.onmousedown = function (e) {
  87. e.stopPropagation();
  88. // e.preventDefault()
  89. if (!e.target.className.includes('darg-div') && !e.target.className.includes('sm-panel-header')) {
  90. return
  91. }
  92. if (e.target.className == "min-solider" || e.target.className == "sm-input sm-input-long" || e.target.className == "sm-input-long" || e.target.className == "sm-input-right") { //
  93. e.stopPropagation();
  94. return;
  95. }
  96. dragElem.setAttribute('data-flag', false) //防止拖动时触发点击事件
  97. firstTime = new Date().getTime();
  98. // a.style.minWidth = a.clientWidth + 'px';
  99. w = document.body.clientWidth; // 当前屏幕宽度
  100. h = document.body.clientHeight; // 当前屏幕的高度
  101. if (isStart) return; // 如果已经开始拖拽, 返回
  102. isStart = true; // 如果没有开始拖拽, 则可以拖拽
  103. const {
  104. clientX,
  105. clientY
  106. } = e;
  107. const x = clientX - a.offsetLeft;
  108. const y = clientY - a.offsetTop;
  109. document.onmousemove = debounce(function (e) {
  110. e.preventDefault();
  111. e.stopPropagation();
  112. l = e.clientX - x;
  113. t = e.clientY - y;
  114. if (l < 0 && t < 0) {
  115. a.style.left = 0 + 'px';
  116. a.style.top = 0 + 'px';
  117. } else if (l < 0 && t + a.clientHeight < h) {
  118. a.style.left = 0 + 'px';
  119. a.style.top = t + 'px';
  120. } else if (l < 0 && t + a.clientHeight >= h) {
  121. a.style.left = 0 + 'px';
  122. a.style.top = h - a.clientHeight + 'px';
  123. } else if (l + a.clientWidth > w && t < 0) {
  124. a.style.left = w - a.clientWidth + 'px';
  125. a.style.top = 0 + 'px';
  126. } else if (l + a.clientWidth < w && t + a.clientHeight >= h) {
  127. a.style.left = l + 'px';
  128. a.style.top = h - a.clientHeight + 'px'
  129. } else if (l + a.clientWidth < w && t < 0) {
  130. a.style.left = l + 'px';
  131. a.style.top = 0 + 'px';
  132. } else if (l + a.clientWidth > w && t + a.clientHeight < h) {
  133. a.style.left = w - a.clientWidth + 'px';
  134. a.style.top = t + 'px';
  135. } else if (l + a.clientWidth > w && t + a.clientHeight >= h) {
  136. a.style.left = w - a.clientWidth + 'px';
  137. a.style.top = h - a.clientHeight + 'px';
  138. } else {
  139. a.style.left = l + 'px';
  140. a.style.top = t + 'px';
  141. }
  142. }, 5)
  143. document.onmouseup = function (e) {
  144. document.onmousedown = null;
  145. document.onmousemove = null;
  146. isStart = false;
  147. // onmouseup 时的时间,并计算差值
  148. lastTime = new Date().getTime();
  149. if ((lastTime - firstTime) < 200) {
  150. dragElem.setAttribute('data-flag', true)
  151. }
  152. distance = {
  153. type: 'move',
  154. clientX: clientX - e.clientX, // 拖动的 x 距离
  155. clientY: clientY - e.clientY // 拖动的 y 距离
  156. }
  157. // binding.value(distance) // 返回拖动的距离
  158. }
  159. }
  160. }
  161. })
  162. }