彈窗修改

src/components/Treat/DrugTreat/index.jsx

@@ -78,7 +78,7 @@ class DrugTreat extends Component {
     }
     showTreatDesc() {
         $('#treatDescBox').css({'display': 'block'});
-        $('#treatWrapper').animate({'margin-left': '-470px'}, 300);
+        $('#treatWrapper').animate({'margin-left': '-471px','left':'50%'}, 300);
         $('#treatDescBox').animate({'width': '260px'}, 500);
         
     }

src/components/Treat/index.less

@@ -43,6 +43,7 @@
     z-index: 301;
     padding-top: 40px;
     padding-bottom: 80px;
+    box-shadow: 2px 0px 5px -2px #ccc;
 }
 .treat-title {
     width: 100%;

src/components/TreatDesc/DrugInfo/index.less

@@ -9,7 +9,7 @@
     background: #fff;
     z-index: 303;
     padding: 40px 0 60px;
-    
+    box-shadow: 2px 0px 5px -2px #ccc;
 }
 .drug-desc-wrapper {
     height: 100%;

src/components/TreatDesc/index.jsx

@@ -25,7 +25,7 @@ class TreatDesc extends Component {
     }
 
     handleMouseEnterDrug( index, item) {
-        console.log('item', item)
+        // console.log('item', item)
         const drugNameWidth = parseInt($('#'+item.medicitionName)[0].offsetWidth)
         
         const imgLeft = drugNameWidth/2-10
@@ -58,7 +58,7 @@ class TreatDesc extends Component {
     hideTreatDesc() {
         $('#treatDescBox').css({'display': 'none'});
         $('#treatDescBox').animate({'display': 'none'}, 500);
-        $('#treatWrapper').animate({'margin-left': '-340px'}, 500);
+        $('#treatWrapper').animate({'margin-left': '-340px','left':'50%'}, 500);
     }
 
     render(){

src/components/TreatDesc/index.less

@@ -45,6 +45,7 @@
     top: 0;
     background: #fff;
     padding: 60px 20px 80px;
+    box-shadow: 2px 0px 5px -2px #ccc;
 }
 .drug-name-box {
     display: inline-block;

src/utils/tools.js

@@ -729,24 +729,37 @@ function getPageLength(event) {     //兼容ie8获取页面距离左和上的距
   return page;
 }
 function dragBox(domWrap,domDrag){
-  let wrap = document.getElementById(domWrap);//呗拖拽的元素
   let drag = document.getElementById(domDrag);//拖拽区域
+  let wrap = document.getElementById(domWrap);//被拖拽的元素
   let width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;//屏幕宽度
   let height = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;//屏幕高度
   let mouseX = 0,mouseY = 0,dragX = 0,dragY = 0,isDrag = false,isMove = false;
-  let maxDragX = width - wrap.offsetWidth;//最大可推拽x方向距离
-  let maxDragY = height - wrap.offsetHeight;//最大可拖拽y方向距离
   windowEventHandler('mousedown',(event)=>{    //鼠标位置获取，计算点击位置到拖拽元素左边的距离
-    wrap = document.getElementById(domWrap);
-    drag = document.getElementById(domDrag);
+    let wrap = document.getElementById(domWrap);
     let page = getPageLength(event);
+    drag = document.getElementById(domDrag);
     mouseX = page.pageX - wrap.offsetLeft      //鼠标到拖拽元素的左边界的距离
     mouseY = page.pageY - wrap.offsetTop       //鼠标到拖拽元素的上边界的距离
     isDrag = true
+    isMove = false
   },drag)
   // windowEventHandler('mousemove',handleMove,document)
   windowEventHandler('mousemove',(event)=>{      //移动的
+    let dragDes = document.getElementById('treatDescBox');//展開区域
     let page = getPageLength(event);
+    let maxDragX = 0,dragDesWidth = 0;
+    let maxDragY = height - wrap.offsetHeight;//最大可拖拽y方向距离
+    
+    if(domDrag == 'dragTreatTitle'){//最大可推拽x方向距离
+      if(dragDes != null){
+        dragDesWidth = dragDes.offsetWidth
+      }else{
+        dragDesWidth = 0
+      }
+      maxDragX = width - wrap.offsetWidth - dragDesWidth
+    }else{
+      maxDragX = width - wrap.offsetWidth
+    }
     if(isDrag){
       dragX = page.pageX - mouseX          //鼠标可拖拽到左边的最大距离
       dragY = page.pageY - mouseY          //鼠标可拖拽到上边的最大距离
@@ -756,9 +769,15 @@ function dragBox(domWrap,domDrag){
       if(dragY < 0){      //不能超出上边界
         dragY = 0
       }
-      if(width-dragX < wrap.offsetWidth){    //不能超出右边界
-        dragX = maxDragX
-      } 
+      if(domDrag == 'dragTreatTitle'){
+        if(width-dragX-dragDesWidth < wrap.offsetWidth){    //不能超出右边界
+          dragX = maxDragX
+        }
+      }else{
+        if(width-dragX < wrap.offsetWidth){    //不能超出右边界
+          dragX = maxDragX
+        }
+      }
       if(height-dragY < wrap.offsetHeight){     //不能超出下边界
         dragY = maxDragY
       }
@@ -768,7 +787,7 @@ function dragBox(domWrap,domDrag){
       wrap.style.top = dragY + 'px'
     }
   },document)
-  windowEventHandler('mouseup',(event)=>{
+  windowEventHandler('mouseup',()=>{
     if(isMove){ //有move就设置位置没有移动就不处理
       wrap.style.left = dragX + 'px'
       wrap.style.top = dragY + 'px'