分割

src/component/HomePage/layout.vue

@@ -185,8 +185,34 @@ export default defineComponent({
 		//操作移动
 		layout:{
 			mounted (el,layout:any,binding) {
+				
 				let mousedown = function(e: MouseEvent){
 					e.stopPropagation()
+					let event:any = {
+						offsetX:e.offsetX,
+						offsetY:e.offsetY,
+						clientX:e.clientX,
+						clientY:e.clientY,
+					}
+					console.log(e);
+					
+					operation(event)
+				}
+				let touchstart = function(e: any){
+					e.stopPropagation()
+					const touch = e.changedTouches[0];
+					let event:any = {
+						offsetX:touch.clientX - e.target.getBoundingClientRect().left,
+						offsetY: touch.clientY - e.target.getBoundingClientRect().top,
+						clientX:touch.clientX,
+						clientY:touch.clientY,
+					}
+					console.log(e);
+					operation(event)
+				}
+				let operation = function(e: MouseEvent){
+					console.log(e);
+					
 					el.parentElement.children.forEach((v:any) => {
 						v.style.left = v.offsetLeft+'px'
 						v.style.top = v.offsetTop+'px'
@@ -203,10 +229,10 @@ export default defineComponent({
 					let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
 					let domY = e.clientY - e.offsetY - Number(top)
 					let mouse = true
-					document.onmousemove = function(e:MouseEvent){
+					let mouseMove = function(e:MouseEvent){
 						if(mouse){
-							el.style.left = e.x-mouseX - domX+'px'
-							el.style.top = e.y-mouseY - domY+'px'
+							el.style.left = e.clientX-mouseX - domX+'px'
+							el.style.top = e.clientY-mouseY - domY+'px'
 							if(el.offsetLeft <=0){
 								el.style.left = 0+'px'
 							}
@@ -221,18 +247,19 @@ export default defineComponent({
 							}
 						}
 					}
-					document.onmouseup = function(){
+					let mouseup = function(){
 						mouse = false
-						document.onmousemove = ()=>{
-
-						}
-						// el.removeEventListener('mousedown',mousedown)
-						
-						// el.removeEventListener('mousedown',mousedown) 
-						// document.onmousemove = false;
+						el.removeEventListener('mousemove',mouseMove)
+						el.removeEventListener('mouseup',mouseup) 
+						//移动端
 					}
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('mouseup', mouseup);
+					//移动端
 				}
 				el.addEventListener('mousedown',mousedown)
+				el.addEventListener('touchstart',touchstart)
+
 			},
 			updated (el,layout) {