同时出现两个拖拽弹窗处理

src/components/TreatDesc/DrugInfo/index.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import style from './index.less';
 import close from './../img/close.png';
 import $ from "jquery";
-import {dragBox} from '@utils/tools'
+import {dragBoxs} from '@utils/drag'
 import { imageUrlPrefix } from '@utils/config.js';
 
 
@@ -17,7 +17,7 @@ class DrugInfo extends Component {
         this.setDragBox = this.setDragBox.bind(this)
     }
     componentDidMount(){
-      dragBox('drugWrapper','drugTitle','add')
+      dragBoxs('add')
     }
     handleClickMenu(index, item, drugDesc) {
         const that = this
@@ -26,8 +26,7 @@ class DrugInfo extends Component {
                 currentIndex: index
             })
         },0)
-        
-        let scrollTop = 60 //标题高度为60px
+        let scrollTop = 60; //标题高度为60px
         drugDesc.map((it, ii) => {
             if( ii < index) {
                 scrollTop = scrollTop + parseInt($('#' + it.title.trim()).css('height'))

src/containers/Treat.js

@@ -5,6 +5,7 @@ import { SELECT_DRUG, SET_OTHER_DRUG, SET_DRUG_INFO, CLEAR_DRUG_INFO,HIDE_TREAT,
 import { getInstroduce, getRecommendBasic, getInstroduceMore, commonTreatAddToAdvice, saveAllAdverseReactions, setAllFollowUp } from '@store/async-actions/treat';
 import { ADD_SCHEME } from '@store/types/pushMessage.js'
 import { getConceptDetail } from '@store/async-actions/pushMessage';
+import {dragBoxs} from '@utils/drag';
 
 
 function mapStateToProps(state){
@@ -67,7 +68,7 @@ function mapDispatchToProps(dispatch) {
             
         },
         hideDrugInfo: () =>{
-            
+            dragBoxs('del')            
             dispatch({
                 type: CLEAR_DRUG_INFO
             })

src/utils/drag.js

@@ -71,7 +71,7 @@ function handleMove(event) {
  * 鼠标弹起弹窗不在跟随鼠标移动
  */
 function handleUp(){
-  isDrag = false
+  isDrag = false;
   return
 }
 /**
@@ -100,6 +100,47 @@ function dragBox(dragWrap,dragTop,type,addDom) {
   }
 }
 
+/**
+ * 同时出现两个弹窗，第二个弹窗写死
+ */
+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
+  dragBox,
+  dragBoxs
 }

src/utils/tools.js

@@ -765,74 +765,7 @@ function timestampToTime(timestamp) {     //excel导入2019年5月1日会转换
   var s = date.getSeconds();
   return Y+M+D+h+m+s;
 }
-function dragBox(domWrap,domDrag,type){
-  // console.log(domWrap,domDrag,'拖拽')
-  let drag = $("#"+domDrag);//拖拽区域
-  let wrap = $("#"+domWrap);//被拖拽的元素
-  let wrapHeight = wrap[0].offsetHeight;//被拖拽的元素高度
-  let wrapWidth = wrap[0].offsetWidth;//被拖拽的元素宽度
-  let width = getWindowInnerWidth();//屏幕宽度
-  let height = getWindowInnerHeight();//屏幕高度
-  let mouseX = 0,mouseY = 0,dragX = 0,dragY = 0,isDrag = false,isMove = false;
-  function handleMove(event){      //移动的
-    let dragDes = $('#treatDescBox');//展開区域
-    let page = getPageCoordinate(event,'0');
-    let maxDragX = 0,dragDesWidth = 0;
-    wrapHeight = wrap[0].offsetHeight;
-    wrapWidth = wrap[0].offsetWidth;
-    let maxDragY = height - wrapHeight;//最大可拖拽y方向距离
-    if(domDrag == 'dragModalTitle'){//最大可推拽x方向距离
-      if(dragDes[0]){
-        dragDesWidth = dragDes[0].offsetWidth
-      }else{
-        dragDesWidth = 0
-      }
-      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(domDrag == 'dragModalTitle'){
-        if(width-dragX-dragDesWidth < wrapWidth){    //不能超出右边界
-          dragX = maxDragX
-        }
-      }else{
-        // console.log(width,dragX,maxDragX,wrapWidth)
-        if(width-dragX < wrapWidth){    //不能超出右边界
-          dragX = maxDragX
-        }
-      }
-      if(height-dragY < wrapHeight){     //不能超出下边界
-        dragY = maxDragY
-      }
-      // isMove = true
-      wrap.css({
-        left:dragX + 'px',
-        marginLeft:0 + 'px',
-        top:dragY + 'px'
-      })
-    }
-  }
-    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',function(){
-      isDrag = false
-      return false
-    })
-}
+
 
 function getCurrentDate(){
   let myDate = new Date();
@@ -1156,7 +1089,6 @@ module.exports = {
     getPageCoordinate,
     windowRemoveEventHandler,
     timestampToTime,
-    dragBox,
     formatContinueDots,
     inspectAndAssist,
     getCurrentDate,