|
@@ -1,102 +1,105 @@
|
|
|
+/**
|
|
|
+ * 弹窗页面同一时间只能渲染一个,可拖拽元素的id都一样'dragModalWrap','dragModalTitle'
|
|
|
+ * 保证能在关闭的时候移除move事件
|
|
|
+ */
|
|
|
import $ from 'jquery';
|
|
|
-import { getWindowInnerHeight,getWindowInnerWidth,getPageCoordinate } from './tools'
|
|
|
+import {
|
|
|
+ getWindowInnerHeight,
|
|
|
+ getWindowInnerWidth,
|
|
|
+ getPageCoordinate
|
|
|
+} from './tools'
|
|
|
+
|
|
|
+let width = '',//屏幕宽度
|
|
|
+ height = '', //屏幕高度
|
|
|
+ dragWrapper = '',//拖拽元素
|
|
|
+ mouseX = 0,//鼠标距离页面左侧
|
|
|
+ mouseY = 0,//鼠标距离页面上部
|
|
|
+ dragX = 0,//鼠标可拖拽到左边的最大距离(元素定位左侧距离)
|
|
|
+ dragY = 0,//鼠标可拖拽到上边的最大距离(元素定位上边距离)
|
|
|
+ isDrag = false,//元素是否处于拖拽中
|
|
|
+ addPart = null;//展开区域,这个展开的宽度应当是固定宽度了
|
|
|
/**
|
|
|
*
|
|
|
- * @param {被拖动的元素} domWrap
|
|
|
- * @param {可拖动的区域} domDrag
|
|
|
- * @param {鼠标滑动监听的区域} dragMove
|
|
|
- * @param {拖动元素/清除拖动事件监听} type
|
|
|
+ * @param {事件对象} event
|
|
|
+ * @param {被拖动的元素} dragModalWrap
|
|
|
+ * @param {可拖动的区域} dragModalTitle
|
|
|
*/
|
|
|
-
|
|
|
-function dragBox(domWrap,domDrag,dragMove){
|
|
|
- // console.log(domWrap,domDrag,'拖拽')
|
|
|
- let drag = $("#"+domDrag);
|
|
|
- let wrap = $("#"+domWrap);
|
|
|
- let wrapHeight = wrap.height();//被拖拽的元素高度
|
|
|
- let wrapWidth = wrap.width();//被拖拽的元素宽度
|
|
|
- let width = getWindowInnerHeight();//屏幕宽度
|
|
|
- let height = getWindowInnerWidth();//屏幕高度
|
|
|
- let mouseX = 0,mouseY = 0,dragX = 0,dragY = 0,isDrag = false,isMove = false;
|
|
|
- // windowEventHandler('mousedown',function(event){ //鼠标位置获取,计算点击位置到拖拽元素左边的距离
|
|
|
- // let page = getPageCoordinate(event,'0');
|
|
|
- // mouseX = page.boxLeft - wrap.offsetLeft //鼠标到拖拽元素的左边界的距离
|
|
|
- // mouseY = page.boxTop - wrap.offsetTop //鼠标到拖拽元素的上边界的距离
|
|
|
- // isDrag = true
|
|
|
- // // isMove = false
|
|
|
- // },drag)
|
|
|
- drag.on('mousedown',function(event){
|
|
|
- let page = getPageCoordinate(event,'0');
|
|
|
- mouseX = page.boxLeft - wrap.offsetLeft //鼠标到拖拽元素的左边界的距离
|
|
|
- mouseY = page.boxTop - wrap.offsetTop //鼠标到拖拽元素的上边界的距离
|
|
|
- isDrag = true
|
|
|
- })
|
|
|
- $(document).on('mousemove',handleMove)
|
|
|
- $(document).on('mouseup',function(){
|
|
|
- isDrag = false
|
|
|
- return false
|
|
|
- })
|
|
|
- // windowEventHandler('mousemove',handleMove,document)
|
|
|
- // windowEventHandler('mouseup',()=>{
|
|
|
- // // if(isMove){ //有move就设置位置没有移动就不处理
|
|
|
- // // console.log(dragX)
|
|
|
- // // wrap.style.left = dragX + 'px'
|
|
|
- // // wrap.style.top = dragY + 'px'
|
|
|
- // // }
|
|
|
- // isDrag = false
|
|
|
- // return false
|
|
|
- // },document)
|
|
|
-
|
|
|
- function handleMove(event){ //移动的
|
|
|
- console.log(99)
|
|
|
- let dragDes = document.getElementById('treatDescBox');//展開区域
|
|
|
- let page = getPageCoordinate(event,'0');
|
|
|
- let maxDragX = 0,dragDesWidth = 0;
|
|
|
- let maxDragY = height - wrapHeight;//最大可拖拽y方向距离
|
|
|
- wrapHeight = wrap.offsetHeight;
|
|
|
- wrapWidth = wrap.offsetWidth;
|
|
|
- if(domDrag == 'dragTreatTitle'){//最大可推拽x方向距离
|
|
|
- if(dragDes != null){
|
|
|
- dragDesWidth = dragDes.offsetWidth
|
|
|
- }else{
|
|
|
- dragDesWidth = 0
|
|
|
- }
|
|
|
- maxDragX = width - wrapWidth - dragDesWidth
|
|
|
- }else{
|
|
|
- maxDragX = width - wrapWidth
|
|
|
+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(isDrag){
|
|
|
- dragX = page.boxLeft - mouseX //鼠标可拖拽到左边的最大距离
|
|
|
- dragY = page.boxTop - mouseY //鼠标可拖拽到上边的最大距离
|
|
|
- if(dragX < 0){ //不能超出左边界
|
|
|
- dragX = 0
|
|
|
- }
|
|
|
- if(dragY < 0){ //不能超出上边界
|
|
|
- dragY = 0
|
|
|
- }
|
|
|
- if(domDrag == 'dragTreatTitle'){
|
|
|
- if(width-dragX-dragDesWidth < wrapWidth){ //不能超出右边界
|
|
|
- dragX = maxDragX
|
|
|
- }
|
|
|
- }else{
|
|
|
- // console.log(width,dragX,maxDragX,wrapWidth)
|
|
|
- if(width-dragX < wrapWidth){ //不能超出右边界
|
|
|
- dragX = maxDragX
|
|
|
- }
|
|
|
+ if (dragY < 0) { //不能超出上边界
|
|
|
+ dragY = 0
|
|
|
+ }
|
|
|
+ if (dragDes[0]) {
|
|
|
+ if (width - dragX - dragDesWidth < wrapWidth) { //不能超出右边界
|
|
|
+ dragX = maxDragX
|
|
|
}
|
|
|
- if(height-dragY < wrapHeight){ //不能超出下边界
|
|
|
- dragY = maxDragY
|
|
|
+ } else {
|
|
|
+ if (width - dragX < wrapWidth) { //不能超出右边界
|
|
|
+ dragX = maxDragX
|
|
|
}
|
|
|
- // isMove = true
|
|
|
- wrap.style.left = dragX + 'px'
|
|
|
- wrap.style.marginLeft = 0 + 'px'
|
|
|
- wrap.style.top = dragY + 'px'
|
|
|
}
|
|
|
+ if (height - dragY < wrapHeight) { //不能超出下边界
|
|
|
+ dragY = maxDragY
|
|
|
+ }
|
|
|
+ // isMove = true
|
|
|
+ wrap.css({
|
|
|
+ left: dragX + 'px',
|
|
|
+ marginLeft: 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)
|
|
|
}
|
|
|
- setTimeout(() => {
|
|
|
- // windowRemoveEventHandler('mousemove',handleMove,document)
|
|
|
- }, 6000);
|
|
|
}
|
|
|
|
|
|
module.exports = {
|
|
|
dragBox
|
|
|
-}
|
|
|
+}
|