弹窗移动

src/components/AddInspect/SlideSelect/index.jsx

@@ -117,6 +117,7 @@ class SlideSelect extends Component {
                             handlePush&&handlePush();     //右侧推送
                         }}
                     >
+                    
                         <div className={styles.searchResultT}>
                             <img style={{"position":"absolute","top":"8px","right":"8px"}} src={date1} alt="" onClick={handleShowDate}/>
                             <p style={{position:"absolute",right:"38px",top:"4px",lineHeight:"28px"}}>

src/components/Treat/index.jsx

@@ -17,11 +17,66 @@ class Treat extends Component {
         this.handlePrescription = this.handlePrescription.bind(this);
         this.handleDetermine = this.handleDetermine.bind(this);
     }
+    componentDidMount(){
+        let wrap = document.getElementById('treatWrapper')
+        let drag = document.getElementById('dragTreatTitle')
+        let width = $(window).width();
+        let height = $(window).height();
+        let mouseX = 0,mouseY = 0,dragX = 0,dragY = 0,isDrag = false,isMove = false;
+        
+        let maxDragX = width - wrap.offsetWidth
+        let maxDragY = height - wrap.offsetHeight
+        drag.onmousedown = (event)=>{    //鼠标位置获取，计算点击位置到拖拽元素左边的距离
+          let e = event || window.event;
+          mouseX = e.pageX - wrap.offsetLeft
+          mouseY = e.pageY - wrap.offsetTop
+          isDrag = true
+        }
+        document.onmousemove = (event)=>{      //移动的
+          let e = event || window.event;
+          if(isDrag){
+            dragX = e.pageX - mouseX
+            dragY = e.pageY - mouseY
+            if(dragX < 0){      //不能超出左边界
+              dragX = 0
+            }
+            if(dragY < 0){      //不能超出上边界
+              dragY = 0
+            }
+            // if(wrap.offsetLeft >= maxDragX){
+            //   dragX = maxDragX
+            // }else{
+            //   dragX = e.pageX - mouseX
+            // }
 
+            // if(height-drag.offsetHeight > wrap.offsetTop){
+            //   dragY = height-drag.offsetHeight
+            // }
+            isMove = true
+            wrap.style.left = dragX + 'px'
+            wrap.style.marginLeft = 0 + 'px'
+            wrap.style.top = dragY + 'px'
+          }
+        }
+        document.onmouseup = ()=>{
+          if(isMove){
+            wrap.style.left = dragX + 'px'
+            wrap.style.top = dragY + 'px'
+          }else{
+            wrap.style.left = '50%'
+            wrap.style.top = '10%'
+            wrap.style.marginLeft = '-340px'
+          }
+          isDrag = false
+          return false
+        }
+    }
     hideTreat() {
         const { hideTreat,clearTreat } = this.props;
         clearTreat && clearTreat();
         hideTreat && hideTreat();
+        // document.onmousemove = null
+        // document.onmouseup = null
     }
     handlePrescription() {
         Notify.info('该功能即将上线，敬请期待。', 2000)
@@ -38,16 +93,14 @@ class Treat extends Component {
     }
 
     render(){
-    
-    
         const { generalTreat, treatment, treatItem, surgeryTreat, selectDrug, drugInfo, treatDesc, setOtherRecommend, setDrugInfo, showDrug, showDrugInfo,hideDrugInfo, title, drugInfoList, hideDrugInfoMore} = this.props;
         const { setDrugInfoMore } = this.props
         return(
             <div   className={style['treat-wrapper']}>
                 <div className={style['treat-mask']} onClick={this.hideTreat}>
                 </div>
-                <div id='treatWrapper' className={style['treat-box']}>
-                    <div className={style['treat-title']}>治疗方案 ({treatItem.name})<img onClick={this.hideTreat} src={close}/></div>
+                <div id="treatWrapper" className={style['treat-box']}  onselectstart="return false">
+                    <div id="dragTreatTitle" className={style['treat-title']}>治疗方案 ({treatItem.name})<img onClick={this.hideTreat} src={close}/></div>
 
                     <div className={style['treat-inner-box']}>
                         <GeneralTreat icon={generalIcon} title='一般治疗'   generalTreat={generalTreat}></GeneralTreat>

src/components/Treat/index.less

@@ -47,6 +47,14 @@
     line-height: 40px;
     border-bottom: 1px solid #e0e2e4;
     padding-left: 20px;
+    cursor: move;
+    moz-user-select: -moz-none;
+    -moz-user-select: none;
+    -o-user-select:none;
+    -khtml-user-select:none;
+    -webkit-user-select:none;
+    -ms-user-select:none;
+    user-select:none;
     img{
         float: right;
         cursor: pointer;