拖动打印

zyd_private/DragAndPrint/DragSetting.js

@@ -10,34 +10,51 @@ export default class Index extends Component {
 	dragEventList = () => {
 		const { updateConfig } = this.props;
 		let draggedRef = null;
-    document.addEventListener('dragstart', function(event) {
+		document.addEventListener(
+			'dragstart',
+			function(event) {
 				// 保存拖动元素的引用(ref.)
 				draggedRef = event.target;
 				// 使其半透明
 				event.target.style.opacity = 0.5;
-    }, false);
-    document.addEventListener('dragend', function(event) {
+			},
+			false,
+		);
+		document.addEventListener(
+			'dragend',
+			function(event) {
 				// 重置透明度
 				event.target.style.opacity = '';
-
-    }, false);
+			},
+			false,
+		);
 
 		/* 放下目标节点时触发事件 */
-    document.addEventListener('dragover', function(event) {
+		document.addEventListener(
+			'dragover',
+			function(event) {
 				// 阻止默认动作
 				event.preventDefault();
-    }, false);
-    document.addEventListener('drop', function(event) {
+        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)) {
+					if (left > event.target.width - draggedRef.offsetWidth - 10) {
 						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,
@@ -46,8 +63,9 @@ export default class Index extends Component {
 					draggedRef.style.left = left; // `${left}px`;
 					draggedRef.style.top = top; // `${top}px`;
 				}
-
-    }, false);
+			},
+			false,
+		);
 	};
 
 	componentDidMount() {
@@ -55,13 +73,18 @@ export default class Index extends Component {
 	}
 
 	render() {
-    const { backgroundUrl, configAll: { config } } = this.props;
+		const {
+			backgroundUrl,
+			configAll: { config },
+		} = this.props;
 		return (
 			<div className={styles.outSideDiv}>
-        <div style={{
+				<div
+					style={{
 						padding: '12px',
 					}}>
-          <img src={backgroundUrl}
+					<img
+						src={backgroundUrl}
 						id={'dropZone'}
 						draggable={false}
 						className={styles.bgimage}
@@ -69,15 +92,15 @@ export default class Index extends Component {
 					/>
 					{config.map((item, index) => {
 						return (
-              <div draggable={true}
+							<div
+								draggable={true}
 								className={styles.inSideItem}
 								key={item.id}
 								id={`dragKey-${item.id}`}
 								style={{
 									top: `${item.y || 20 + index * 40}px`,
 									left: `${item.x || 20}px`,
-                   }}
-              >
+								}}>
 								{item.title}
 							</div>
 						);
@@ -86,5 +109,4 @@ export default class Index extends Component {
 			</div>
 		);
 	}
-
 }