拖动打印

zyd_private/DragAndPrint/DragSetting.js

@@ -2,89 +2,111 @@ import React, { Fragment, Component } from 'react';
 import styles from './index.less';
 
 export default class Index extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
 
-  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 = '';
+	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,
+		);
 
-    }, false);
+		/* 放下目标节点时触发事件 */
+		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) {
+						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`;
+				}
+			},
+			false,
+		);
+	};
 
-    /* 放下目标节点时触发事件 */
-    document.addEventListener('dragover', function(event) {
-      // 阻止默认动作
-      event.preventDefault();
-    }, 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)) {
-          console.error('拖拽到了图片区域外部,不能进行拖拽');
-          return false;
-        }
-        const top = event.offsetY;
-        updateConfig({
-          id: draggedRef.id.replace('dragKey-', ''),
-          x: left,
-          y: top,
-        });
-        draggedRef.style.left = left; // `${left}px`;
-        draggedRef.style.top = top; // `${top}px`;
-      }
-
-    }, false);
-  };
-
-  componentDidMount() {
-    this.dragEventList();
-  }
-
-  render() {
-    const { backgroundUrl, configAll: { config } } = this.props;
-    return (
-      <div className={styles.outSideDiv}>
-        <div style={{
-          padding: '12px',
-        }}>
-          <img src={backgroundUrl}
-               id={'dropZone'}
-               draggable={false}
-               className={styles.bgimage}
-               alt={'背景图'}
-          />
-          {config.map((item, index) => {
-            return (
-              <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>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
+	componentDidMount() {
+		this.dragEventList();
+	}
 
+	render() {
+		const {
+			backgroundUrl,
+			configAll: { config },
+		} = this.props;
+		return (
+			<div className={styles.outSideDiv}>
+				<div
+					style={{
+						padding: '12px',
+					}}>
+					<img
+						src={backgroundUrl}
+						id={'dropZone'}
+						draggable={false}
+						className={styles.bgimage}
+						alt={'背景图'}
+					/>
+					{config.map((item, index) => {
+						return (
+							<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>
+						);
+					})}
+				</div>
+			</div>
+		);
+	}
 }