newICSS/src/utils/drag.js

/**
 * 弹窗页面同一时间只能渲染一个，可拖拽元素的id都一样'dragModalWrap'，'dragModalTitle'
 * 保证能在关闭的时候移除move事件
 */
import $ from 'jquery';
import {
  windowEventHandler,
  getWindowInnerHeight,
  getWindowInnerWidth,
  getPageCoordinate
} from './tools'
import { SET_MOVE } from "@store/types/preIcss";
import store from "@store";

let width = '',//屏幕宽度
  height = '', //屏幕高度
  dragWrapper = '',//拖拽元素
  mouseX = 0,//鼠标距离页面左侧
  mouseY = 0,//鼠标距离页面上部
  dragX = 0,//鼠标可拖拽到左边的最大距离（元素定位左侧距离）
  dragY = 0,//鼠标可拖拽到上边的最大距离（元素定位上边距离）
  isDrag = false,//元素是否处于拖拽中
  addPart = null,//展开区域,这个展开的宽度应当是固定宽度了
  free=false;//有无边界限制
/**
 * 
 * @param {事件对象} event 
 * @param {被拖动的元素} dragModalWrap
 * @param {可拖动的区域} dragModalTitle 
 */
function handleMove(event) {
  let wrap = $("#"+dragWrapper); //被拖拽的元素
  let dragDes = $("#"+addPart); //展開区域
  let page = getPageCoordinate(event, '0');//获取鼠标位置
  let maxDragX = 0,dragDesWidth = 0;
  let wrapHeight = wrap[0].offsetHeight;//直接用.height()获取的高度不准确
  let wrapWidth = wrap[0].offsetWidth;
  let maxDragY = height - wrapHeight; //最大可拖拽y方向距离
  if (dragDes[0]) { //存在就有类似治疗方案的弹窗，最大可推拽x方向距离
    dragDesWidth = dragDes[0].offsetWidth//展开元素的宽度
    maxDragX = free?'10000':width - wrapWidth - dragDesWidth
  } else {
    maxDragX = free?'10000':width - wrapWidth
  }
  if (isDrag) {
    dragX = page.boxLeft - mouseX //鼠标可拖拽到左边的最大距离
    dragY = page.boxTop - mouseY //鼠标可拖拽到上边的最大距离
    if (dragX < 0) { //不能超出左边界
      dragX = 0
    }
    if (dragY < 0) { //不能超出上边界
      dragY = 0
    }
    if (dragDes[0]) {
      if (width - dragX - dragDesWidth < wrapWidth) { //不能超出右边界
        dragX = maxDragX
      }
    } else {
      if (width - dragX < wrapWidth) { //不能超出右边界
        dragX = maxDragX
      }
    }
    if (height - dragY < wrapHeight) { //不能超出下边界
      dragY = maxDragY
    }
    // isMove = true
    wrap.css({
      left: dragX + 'px',
      marginLeft: 0 + 'px',
      marginTop: 0 + 'px',
      top: dragY + 'px',
      bottom:'auto',
      right:'inherit',
    })
  }
}
/**
 * 鼠标弹起弹窗不在跟随鼠标移动
 */
function handleUp(){
  isDrag = false;
  return
}
/**
 * @param {拖动元素/清除拖动事件监听} type add:添加事件监听  del:移除事件监听
 * @param {展开元素id} addDom 
 */
let timer 
function dragBox(dragWrap,dragTop,type,addDom,img,free) {
  clearTimeout(timer)
  let drag = $("#"+dragTop); //拖拽区域
  let wrap = $("#"+dragWrap); //被拖拽的元素
  width = getWindowInnerWidth(); 
  height = getWindowInnerHeight();
  addPart = addDom||null;
  free = free||false;
  dragWrapper = dragWrap;
  if (type === 'del') {
    $(document).off('mousemove', handleMove)
    $(document).off('mouseup', handleUp)
  } else {
    drag.on('mousedown', function (event) {
      let lenHeight = wrap.height()
      if(img){
        $("#preImg").css("height",(lenHeight)+'px')
        $("#dragModalWrap").css("height",(lenHeight)+'px')
      }
      let page = getPageCoordinate(event, '0');
      mouseX = page.boxLeft - wrap.offset().left; //鼠标到拖拽元素的左边界的距离
      mouseY = page.boxTop - wrap.offset().top; //鼠标到拖拽元素的上边界的距离
      isDrag = true
    })
    $(document).on('mousemove', handleMove)
    $(document).on('mouseup', handleUp)
  
    windowEventHandler('resize', ()=>{
      clearTimeout(timer)
      timer = setTimeout(()=>{
        dragBox(dragWrap,dragTop,'del',addDom,img,free)
        dragBox(dragWrap,dragTop,type,addDom,img,free)
      }, 200)
    });
    
  }
}

/**
 * 同时出现两个弹窗，第二个弹窗写死
 */
let mouseXS = 0,mouseYS = 0,dragXS = 0,dragYS = 0,canDrag = false;
function dragBoxs(type){
  let drag = $("#drugTitle"),wrap = $("#drugWrapper");
  if(type == 'del'){
    $(document).off('mousemove', handleMoves)
    $(document).off('mouseup', handleUps)
    return
  }else{
    drag.on('mousedown',function(event){
      let page = getPageCoordinate(event,'0');
      mouseXS = page.boxLeft - wrap.offset().left;
      mouseYS = page.boxTop - wrap.offset().top;       
      canDrag = true;
    })
    $(document).on('mousemove',handleMoves)
    $(document).on('mouseup',handleUps)
  }
}
function handleUps(){
  $(document).on('mouseup',function(){canDrag = false;return;})
}
function handleMoves(event){   
  let wrap = $("#drugWrapper");
  let wrapHeight = wrap[0].offsetHeight,wrapWidth = wrap[0].offsetWidth;
  let width = getWindowInnerWidth(),height = getWindowInnerHeight(),page = getPageCoordinate(event,'0');
  let maxDragY = height - wrapHeight;
  let maxDragX = width - wrapWidth
  if(canDrag){
    dragXS = page.boxLeft - mouseXS;
    dragYS = page.boxTop - mouseYS;
    if(dragXS < 0){dragXS = 0}
    if(dragYS < 0){dragYS = 0}
    if(width-dragXS < wrapWidth){dragXS = maxDragX}
    if(height-dragYS < wrapHeight){dragYS = maxDragY}
    wrap.css({left:dragXS + 'px',marginLeft:0 + 'px',top:dragYS + 'px'})
  }
}
/**
 * 预问诊预览图片可拖拽
 */
let imgXS = 0,//鼠标距离图片左侧的位置
    imgYS = 0,//鼠标距离图片顶部的位置
    imgDXS = 0,//图片距离左侧的位置
    imgDYS = 0,//图片距离顶部的位置
    imgWXS = 0,//图片容器距离顶部的位置
    imgWYS = 0,//图片容器距离顶部的位置
    imgDrag = false;
function imgDragMove(type){
  let wrap = $("#previewWrapper");
  let drag = $("#drugImg");
  if(type == 'del'){
    $(document).off('mousemove', handleMoveImg)
    $(document).off('mouseup', handleUpImg)
    return
  }else{
    drag.on('mousedown',function(event){
      event.preventDefault()
      let page = getPageCoordinate(event,'0');
      imgXS = page.boxLeft - drag.offset().left;
      imgYS = page.boxTop - drag.offset().top;       
      imgDrag = true;
      
      imgDXS = drag.offset().left;
      imgDYS = drag.offset().top;
      imgWXS = wrap.offset().left
      imgWYS = wrap.offset().top
        
      $(document).on('mousemove',handleMoveImg)
      $(document).on('mouseup',handleUpImg)
    })
  }
}
function handleUpImg(){
  imgDrag = false;
  return;
}
function handleMoveImg(event){  
  let isMove = store.getState().preIcss.isMove;
  !isMove&&store.dispatch({type:SET_MOVE,isMove:true})
  let wrap = $("#previewWrapper");
  let drag = $("#drugImg");
  let page = getPageCoordinate(event,'0');
  let wrapWidth = drag[0].offsetWidth;
  let wrapHeight = drag[0].offsetHeight;
  if(imgDrag){
    imgDXS = page.boxLeft - imgXS - imgWXS;//相对于父元素定位
    imgDYS = page.boxTop - imgYS - imgWYS;
    drag.css({
      width:wrapWidth+'px',
      height:wrapHeight+'px',
      marginLeft:'0px',
      marginTop:'0px',
      left:imgDXS + 'px',
      top:imgDYS + 'px'
    })
  }
}
module.exports = {
  dragBox,
  dragBoxs,
  imgDragMove
}