drag.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /**
  2. * 弹窗页面同一时间只能渲染一个,可拖拽元素的id都一样'dragModalWrap','dragModalTitle'
  3. * 保证能在关闭的时候移除move事件
  4. */
  5. import $ from 'jquery';
  6. import {
  7. windowEventHandler,
  8. getWindowInnerHeight,
  9. getWindowInnerWidth,
  10. getPageCoordinate
  11. } from './tools'
  12. import { SET_MOVE } from "@store/types/preIcss";
  13. import store from "@store";
  14. let width = '',//屏幕宽度
  15. height = '', //屏幕高度
  16. dragWrapper = '',//拖拽元素
  17. mouseX = 0,//鼠标距离页面左侧
  18. mouseY = 0,//鼠标距离页面上部
  19. dragX = 0,//鼠标可拖拽到左边的最大距离(元素定位左侧距离)
  20. dragY = 0,//鼠标可拖拽到上边的最大距离(元素定位上边距离)
  21. isDrag = false,//元素是否处于拖拽中
  22. addPart = null,//展开区域,这个展开的宽度应当是固定宽度了
  23. free=false;//有无边界限制
  24. /**
  25. *
  26. * @param {事件对象} event
  27. * @param {被拖动的元素} dragModalWrap
  28. * @param {可拖动的区域} dragModalTitle
  29. */
  30. function handleMove(event) {
  31. let wrap = $("#"+dragWrapper); //被拖拽的元素
  32. let dragDes = $("#"+addPart); //展開区域
  33. let page = getPageCoordinate(event, '0');//获取鼠标位置
  34. let maxDragX = 0,dragDesWidth = 0;
  35. let wrapHeight = wrap[0].offsetHeight;//直接用.height()获取的高度不准确
  36. let wrapWidth = wrap[0].offsetWidth;
  37. let maxDragY = height - wrapHeight; //最大可拖拽y方向距离
  38. if (dragDes[0]) { //存在就有类似治疗方案的弹窗,最大可推拽x方向距离
  39. dragDesWidth = dragDes[0].offsetWidth//展开元素的宽度
  40. maxDragX = free?'10000':width - wrapWidth - dragDesWidth
  41. } else {
  42. maxDragX = free?'10000':width - wrapWidth
  43. }
  44. if (isDrag) {
  45. dragX = page.boxLeft - mouseX //鼠标可拖拽到左边的最大距离
  46. dragY = page.boxTop - mouseY //鼠标可拖拽到上边的最大距离
  47. if (dragX < 0) { //不能超出左边界
  48. dragX = 0
  49. }
  50. if (dragY < 0) { //不能超出上边界
  51. dragY = 0
  52. }
  53. if (dragDes[0]) {
  54. if (width - dragX - dragDesWidth < wrapWidth) { //不能超出右边界
  55. dragX = maxDragX
  56. }
  57. } else {
  58. if (width - dragX < wrapWidth) { //不能超出右边界
  59. dragX = maxDragX
  60. }
  61. }
  62. if (height - dragY < wrapHeight) { //不能超出下边界
  63. dragY = maxDragY
  64. }
  65. // isMove = true
  66. wrap.css({
  67. left: dragX + 'px',
  68. marginLeft: 0 + 'px',
  69. marginTop: 0 + 'px',
  70. top: dragY + 'px',
  71. bottom:'auto',
  72. right:'inherit',
  73. })
  74. }
  75. }
  76. /**
  77. * 鼠标弹起弹窗不在跟随鼠标移动
  78. */
  79. function handleUp(){
  80. isDrag = false;
  81. return
  82. }
  83. /**
  84. * @param {拖动元素/清除拖动事件监听} type add:添加事件监听 del:移除事件监听
  85. * @param {展开元素id} addDom
  86. */
  87. let timer
  88. function dragBox(dragWrap,dragTop,type,addDom,img,free) {
  89. clearTimeout(timer)
  90. let drag = $("#"+dragTop); //拖拽区域
  91. let wrap = $("#"+dragWrap); //被拖拽的元素
  92. width = getWindowInnerWidth();
  93. height = getWindowInnerHeight();
  94. addPart = addDom||null;
  95. free = free||false;
  96. dragWrapper = dragWrap;
  97. if (type === 'del') {
  98. $(document).off('mousemove', handleMove)
  99. $(document).off('mouseup', handleUp)
  100. } else {
  101. drag.on('mousedown', function (event) {
  102. let lenHeight = wrap.height()
  103. if(img){
  104. $("#preImg").css("height",(lenHeight)+'px')
  105. $("#dragModalWrap").css("height",(lenHeight)+'px')
  106. }
  107. let page = getPageCoordinate(event, '0');
  108. mouseX = page.boxLeft - wrap.offset().left; //鼠标到拖拽元素的左边界的距离
  109. mouseY = page.boxTop - wrap.offset().top; //鼠标到拖拽元素的上边界的距离
  110. isDrag = true
  111. })
  112. $(document).on('mousemove', handleMove)
  113. $(document).on('mouseup', handleUp)
  114. windowEventHandler('resize', ()=>{
  115. clearTimeout(timer)
  116. timer = setTimeout(()=>{
  117. dragBox(dragWrap,dragTop,'del',addDom,img,free)
  118. dragBox(dragWrap,dragTop,type,addDom,img,free)
  119. }, 200)
  120. });
  121. }
  122. }
  123. /**
  124. * 同时出现两个弹窗,第二个弹窗写死
  125. */
  126. let mouseXS = 0,mouseYS = 0,dragXS = 0,dragYS = 0,canDrag = false;
  127. function dragBoxs(type){
  128. let drag = $("#drugTitle"),wrap = $("#drugWrapper");
  129. if(type == 'del'){
  130. $(document).off('mousemove', handleMoves)
  131. $(document).off('mouseup', handleUps)
  132. return
  133. }else{
  134. drag.on('mousedown',function(event){
  135. let page = getPageCoordinate(event,'0');
  136. mouseXS = page.boxLeft - wrap.offset().left;
  137. mouseYS = page.boxTop - wrap.offset().top;
  138. canDrag = true;
  139. })
  140. $(document).on('mousemove',handleMoves)
  141. $(document).on('mouseup',handleUps)
  142. }
  143. }
  144. function handleUps(){
  145. $(document).on('mouseup',function(){canDrag = false;return;})
  146. }
  147. function handleMoves(event){
  148. let wrap = $("#drugWrapper");
  149. let wrapHeight = wrap[0].offsetHeight,wrapWidth = wrap[0].offsetWidth;
  150. let width = getWindowInnerWidth(),height = getWindowInnerHeight(),page = getPageCoordinate(event,'0');
  151. let maxDragY = height - wrapHeight;
  152. let maxDragX = width - wrapWidth
  153. if(canDrag){
  154. dragXS = page.boxLeft - mouseXS;
  155. dragYS = page.boxTop - mouseYS;
  156. if(dragXS < 0){dragXS = 0}
  157. if(dragYS < 0){dragYS = 0}
  158. if(width-dragXS < wrapWidth){dragXS = maxDragX}
  159. if(height-dragYS < wrapHeight){dragYS = maxDragY}
  160. wrap.css({left:dragXS + 'px',marginLeft:0 + 'px',top:dragYS + 'px'})
  161. }
  162. }
  163. /**
  164. * 预问诊预览图片可拖拽
  165. */
  166. let imgXS = 0,//鼠标距离图片左侧的位置
  167. imgYS = 0,//鼠标距离图片顶部的位置
  168. imgDXS = 0,//图片距离左侧的位置
  169. imgDYS = 0,//图片距离顶部的位置
  170. imgWXS = 0,//图片容器距离顶部的位置
  171. imgWYS = 0,//图片容器距离顶部的位置
  172. imgDrag = false;
  173. function imgDragMove(type){
  174. let wrap = $("#previewWrapper");
  175. let drag = $("#drugImg");
  176. if(type == 'del'){
  177. $(document).off('mousemove', handleMoveImg)
  178. $(document).off('mouseup', handleUpImg)
  179. return
  180. }else{
  181. drag.on('mousedown',function(event){
  182. event.preventDefault()
  183. let page = getPageCoordinate(event,'0');
  184. imgXS = page.boxLeft - drag.offset().left;
  185. imgYS = page.boxTop - drag.offset().top;
  186. imgDrag = true;
  187. imgDXS = drag.offset().left;
  188. imgDYS = drag.offset().top;
  189. imgWXS = wrap.offset().left
  190. imgWYS = wrap.offset().top
  191. $(document).on('mousemove',handleMoveImg)
  192. $(document).on('mouseup',handleUpImg)
  193. })
  194. }
  195. }
  196. function handleUpImg(){
  197. imgDrag = false;
  198. return;
  199. }
  200. function handleMoveImg(event){
  201. let isMove = store.getState().preIcss.isMove;
  202. !isMove&&store.dispatch({type:SET_MOVE,isMove:true})
  203. let wrap = $("#previewWrapper");
  204. let drag = $("#drugImg");
  205. let page = getPageCoordinate(event,'0');
  206. let wrapWidth = drag[0].offsetWidth;
  207. let wrapHeight = drag[0].offsetHeight;
  208. if(imgDrag){
  209. imgDXS = page.boxLeft - imgXS - imgWXS;//相对于父元素定位
  210. imgDYS = page.boxTop - imgYS - imgWYS;
  211. drag.css({
  212. width:wrapWidth+'px',
  213. height:wrapHeight+'px',
  214. marginLeft:'0px',
  215. marginTop:'0px',
  216. left:imgDXS + 'px',
  217. top:imgDYS + 'px'
  218. })
  219. }
  220. }
  221. module.exports = {
  222. dragBox,
  223. dragBoxs,
  224. imgDragMove
  225. }