招生增加录取通知书格式设置 拖拽页面

zyd_public/components/DraggableSetting/index.js

+import React, { Fragment, Component } from 'react';
+import styles from './index.less';
+import ButtonDiy from '@/baseComponent/ButtonDiy';
+import Shell from '@/baseComponent/Shell';
+
+export default class FormatSetting extends Component {
+
+  dragEventList = () => {
+    const { formatSettingObject, updateFormatSettingObject } = 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);
+
+    /* 放下目标节点时触发事件 */
+    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.log('拖拽到了图片区域外部,不能进行拖拽');
+          return false;
+        }
+        const top = event.offsetY;
+        updateFormatSettingObject(draggedRef.id, left, top);
+        draggedRef.style.left = left; // `${left}px`;
+        draggedRef.style.top = top; // `${top}px`;
+      }
+
+    }, false);
+  };
+
+  componentDidMount() {
+    this.dragEventList();
+
+  }
+
+  render() {
+    const { bgImage, formatSettingObject, saveConfig } = this.props;
+    const configInfo = Object.keys(formatSettingObject);
+
+    return <Fragment>
+      <Shell styleShell={{marginTop: '0',marginBottom: '20px'}}>
+        <div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
+          <ButtonDiy
+            name="保存"
+            className="primary"
+            handleClick={saveConfig}
+          />
+        </div>
+      </Shell>
+      <div className={styles.outSideDiv}>
+        <div>
+          <img src={bgImage}
+               id={'dropZone'}
+               draggable={false}
+               className={styles.bgimage}
+               alt={'背景图'}
+          />
+          {configInfo.map((x) => {
+            return (
+              <div draggable={true}
+                   className={styles.inSideItem}
+                   key={x}
+                   id={x}
+                   style={formatSettingObject[x].style}
+              >
+                {formatSettingObject[x].title}
+              </div>
+            );
+          })}
+
+        </div>
+
+
+      </div>
+    </Fragment>
+      ;
+  }
+}
+/***
+ * formatSettingObject: {
+ *   content_set:  {
+ *     font: "宋体"
+       isNeedConfig: true
+       key: "JjqCiRYamxs"
+       name: "content_set"
+       size: "12"
+       style: {top: 300, left: 50}
+       title: "--详细内容--"
+ *   }
+ * }
+ *
+ * */

zyd_public/components/DraggableSetting/index.less

+.outSideDiv{
+  position: relative;
+  text-align: left;
+  width: 100%;
+  .bgimage{
+    height: auto;
+    overflow: auto;
+    z-index: 1;
+  }
+  .inSideItem{
+    position: absolute;
+    cursor: move;
+    z-index: 10;
+    color: #000;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 14px;
+    line-height: 28px;
+    border: 1px solid gray;
+    background-color: #CCC;
+  }
+}