123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231 |
- /**
- * 弹窗页面同一时间只能渲染一个,可拖拽元素的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
- }
|