拖到打印修改

zyd_private/DragAndPrint/DragSetting.js

@@ -4,73 +4,111 @@ import styles from './index.less';
 export default class Index extends Component {
 	constructor(props) {
 		super(props);
-		this.state = {};
+		this.time1 = new Date().getTime();
+		this.state = {
+			isDownObj: {},
+			drag: {
+				objX: '0px',
+				objY: '0px',
+				mouseY: 0,
+				mouseX: 0,
+			},
+		};
+	}
+	componentDidMount() {
 	}
 
-	dragEventList = () => {
-		const { updateConfig } = this.props;
-		let draggedRef = null;
-		document.addEventListener(
-			'dragstart',
-			function(event) {
-				// 保存拖动元素的引用(ref.)
-				draggedRef = event.target;
-				// 使其半透明
-				event.target.style.opacity = 0.5;
-			},
-			false,
-		);
-		document.addEventListener(
-			'dragend',
-			function(event) {
-				// 重置透明度
-				event.target.style.opacity = '';
-			},
-			false,
-		);
+	handleOnMouseDown = (e, id) => {
+		const div = document.getElementById(id);
+		const { isDownObj } = this.state;
+		const newDrag = {
+			objX: div.style.left,
+			objY: div.style.top,
+			mouseX: e.clientX,
+			mouseY: e.clientY,
+		};
+		for (let item in isDownObj) {
+			isDownObj[item] = false;
+		}
+		isDownObj[id] = true;
 
-		/* 放下目标节点时触发事件 */
-		document.addEventListener(
-			'dragover',
-			function(event) {
-				// 阻止默认动作
-				event.preventDefault();
-        console.log('drop-x = ', event.offsetX);
-        console.log('drop-y = ', event.offsety);
-			},
-			false,
-		);
-		document.addEventListener(
-			'drop',
-			function(event) {
-				// 阻止默认动作（如打开一些元素的链接）
-				event.preventDefault();
-				// 将拖动的元素到所选择的放置目标节点中
-				if (event.target.id === 'dropZone') {
-					const left = event.offsetX;
-					if (left > event.target.width - draggedRef.offsetWidth - 10) {
+		this.setState({
+			drag: newDrag,
+			isDownObj,
+		});
+	};
+
+	handleOnMouseMove = (e) => {
+		const { drag, isDownObj } = this.state;
+		if (new Date().getTime() - this.time1 < 17) {
+			this.time1 = new Date().getTime();
+			return false;
+		}
+		let id = '';
+		for (let item in isDownObj) {
+			if (isDownObj[item]) {
+				id = item;
+			}
+		}
+		if (!id) {
+			return false;
+		}
+
+		let { mouseX, mouseY, objX, objY } = drag;
+		const div = document.getElementById(id);
+		let x = e.clientX;
+		let y = e.clientY;
+		if (isDownObj && isDownObj[id]) {
+			const styleLeft =
+				parseInt(objX, 10) + parseInt(x, 10) - parseInt(mouseX, 10); // 计算偏移量
+			const styleTop =
+				parseInt(objY, 10) + parseInt(y, 10) - parseInt(mouseY, 10); // 计算偏移量
+			const dropZone = document.getElementById('dropZone');
+			if ( // 阻止拖拽到图片外部
+				styleLeft > dropZone.width - 15
+        || (styleLeft < 15)
+        || (styleTop > dropZone.height - 15)
+        || styleTop < 15
+			) {
 				console.error('拖拽到了图片区域外部,不能进行拖拽');
 				return false;
 			}
-					const top = event.offsetY;
-          console.log('drop-x = ', event.offsetX);
-          console.log('drop-y = ', event.offsety);
-					updateConfig({
-						id: draggedRef.id.replace('dragKey-', ''),
-						x: left,
-						y: top,
-					});
-					draggedRef.style.left = left; // `${left}px`;
-					draggedRef.style.top = top; // `${top}px`;
+			div.style.left = styleLeft + 'px';
+			div.style.top = styleTop + 'px';
 		}
-			},
-			false,
-		);
 	};
 
-	componentDidMount() {
-		this.dragEventList();
+	handleOnMouseUp = (e, id) => {
+		const { drag, isDownObj } = this.state;
+		let { mouseX, mouseY, objX, objY } = drag;
+		if (isDownObj[id]) {
+			let x = e.clientX;
+			let y = e.clientY;
+			let div = document.getElementById(id);
+			const styleLeft = parseInt(x, 10) - parseInt(mouseX, 10) + parseInt(objX, 10);
+			const styleTop = parseInt(y, 10) - parseInt(mouseY, 10) + parseInt(objY, 10);
+			div.style.left = `${styleLeft}px`;
+			div.style.top = `${styleTop}px`;
+			mouseX = x;
+			mouseY = y;
+			const { updateConfig } = this.props;
+
+			updateConfig({
+				id: id.replace('dragKey-', ''),
+				x: styleLeft,
+				y: styleTop,
+			});
+			this.setState({
+				drag: {
+					mouseX,
+					mouseY,
+					objX,
+					objY,
+				},
+				isDownObj: {},
+			});
 		}
+	};
 
 	render() {
 		const {
@@ -80,6 +118,9 @@ export default class Index extends Component {
 		return (
 			<div className={styles.outSideDiv}>
 				<div
+					onMouseMove={(e) => {
+						this.handleOnMouseMove(e);
+					}}
 					style={{
 						padding: '12px',
 					}}>
@@ -91,17 +132,26 @@ export default class Index extends Component {
 						alt={'背景图'}
 					/>
 					{config.map((item, index) => {
+						const domId = `dragKey-${item.id}`;
 						return (
 							<div
-								draggable={true}
+								draggable={false}
 								className={styles.inSideItem}
 								key={item.id}
-								id={`dragKey-${item.id}`}
+								onMouseDown={(e) => {
+									this.handleOnMouseDown(e, domId);
+								}}
+								onMouseUp={(e) => {
+									this.handleOnMouseUp(e, domId);
+								}}
+								id={domId}
 								style={{
 									top: `${item.y || 20 + index * 40}px`,
 									left: `${item.x || 20}px`,
 								}}>
+								<span style={{ marginLeft: '10px', marginRight: '10px' }}>
 									{item.title}
+								</span>
 							</div>
 						);
 					})}

zyd_private/DragAndPrint/ViewPrint/index.js

@@ -23,6 +23,9 @@ export default class ViewPrint extends Component {
   }
 
   countImageHeight = () => {
+    if(!this.state.configAll){
+      return false;
+    }
     const {
       configAll: { backgroundUrl },
     } = this.state;

zyd_private/DragAndPrint/index.js

@@ -60,7 +60,7 @@ export default class Index extends Component {
 		if (!configAll || !configAll.backgroundUrl) {
 			return null;
 		}
-		console.log(configAll);
+		// console.log(configAll);
 		return (
 			<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
 				<div style={{ height: '54px', padding: '12px 0 24px 12px' }}>

zyd_private/DragAndPrint/index.less

@@ -12,10 +12,11 @@
     cursor: move;
     z-index: 10;
     color: #000;
-    padding-left: 10px;
-    padding-right: 10px;
+    user-select: none;
+   // padding-left: 10px;
+   // padding-right: 10px;
     font-size: 14px;
-    line-height: 28px;
+   // line-height: 28px;
     border: 1px solid gray;
     background-color: #CCC;
   }