newICSS/src/utils/drag.js

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

let width = '',//屏幕宽度
  height = '', //屏幕高度
  dragWrapper = '',//拖拽元素
  mouseX = 0,//鼠标距离页面左侧
  mouseY = 0,//鼠标距离页面上部
  dragX = 0,//鼠标可拖拽到左边的最大距离（元素定位左侧距离）
  dragY = 0,//鼠标可拖拽到上边的最大距离（元素定位上边距离）
  isDrag = false,//元素是否处于拖拽中
  addPart = null;//展开区域,这个展开的宽度应当是固定宽度了
/**
 * 
 * @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 = width - wrapWidth - dragDesWidth
  } else {
    maxDragX = 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'
    })
  }
}
/**
 * 鼠标弹起弹窗不在跟随鼠标移动
 */
function handleUp(){
  isDrag = false;
  return
}
/**
 * @param {拖动元素/清除拖动事件监听} type add:添加事件监听  del:移除事件监听
 * @param {展开元素id} addDom 
 */
function dragBox(dragWrap,dragTop,type,addDom) {
  let drag = $("#"+dragTop); //拖拽区域
  let wrap = $("#"+dragWrap); //被拖拽的元素
  width = getWindowInnerWidth(); 
  height = getWindowInnerHeight();
  addPart = addDom||null;
  dragWrapper = dragWrap;
  if (type === 'del') {
    $(document).off('mousemove', handleMove)
    $(document).off('mouseup', handleUp)
  } else {
    drag.on('mousedown', function (event) {
      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)
  }
}

/**
 * 同时出现两个弹窗，第二个弹窗写死
 */
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('mousemove',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'})
  }
}
module.exports = {
  dragBox,
  dragBoxs
}