签章组件 拖拽不够精确的bug

one_stop_public/libs/PictureSignature/PictureSignature.js

@@ -98,11 +98,17 @@ export default function PictureSignature({
             objs: signConfig.map((g) => {
               // 1200 的 x => 1500的 x
               //
-              g.x = parseInt(g.x * ratioX, 10);
-              g.y = parseInt(g.y * ratioX, 10);
+              g.x =  Math.ceil(g.x * ratioX, 10);
+              g.y =  Math.ceil(g.y * ratioX, 10);
+
               if (g.type === 'text') {
+                g.fontSize = Math.ceil(g.fontSize * ratioX);
                 g.y = g.y + 20;
-                g.x = g.x + 20;
+                // g.x = g.x + 20;
+              }
+              if(g.type === 'image'){
+                g.w = Math.ceil(g.w * ratioX);
+                g.h = Math.ceil(g.h * ratioX);
               }
               // console.log(g);
               return g;
@@ -217,6 +223,7 @@ export default function PictureSignature({
                     <div
                       key={g.key}
                       data-mes={g.key}
+                      data-get={'draggable'} // 可拖拽元素
                       draggable={false}
                       className={styles.oneSetItem}
                       style={{
@@ -225,8 +232,9 @@ export default function PictureSignature({
                       }}
                     >
                       <div className={styles.draggableIcon}
+                           data-mes={g.key}
                            draggable={true}>
-                        <Icon type="edit"/>
+                        <Icon type="scissor" />
                       </div>
                       <ShowItem {...g}
                                 basicUrl={basicUrl}

one_stop_public/libs/PictureSignature/ShowItem.js

@@ -50,6 +50,15 @@ export const dragEventList = (setOtherProps, otherProps) => {
       // 保存拖动元素的引用(ref.)
       draggedRef = event.target;
       // 使其半透明
+       draggedRef.nextSibling.style.display = 'none'; // 使兄弟元素隐藏
+      // let displayNoneDoms = document.querySelectorAll('div[data-get="draggable"]');
+      // for(let item of displayNoneDoms){
+      //   if(item.dataset.mes !== draggedRef.dataset.mes){
+      //     item.style.display = 'none';
+      //     // item.style.opacity = 0.5;
+      //   }
+      // }
+
       event.target.style.opacity = 0.5;
     },
     false,
@@ -59,6 +68,12 @@ export const dragEventList = (setOtherProps, otherProps) => {
     (event) => {
       // 重置透明度
       event.target.style.opacity = '';
+      event.target.nextSibling.style.display = 'block';
+      // let displayNoneDoms = document.querySelectorAll("div[get=draggable]");
+      // for(let item of displayNoneDoms){
+      //   item.style.display = 'block';
+      //   // item.style.opacity = 1;
+      // }
     },
     false,
   );
@@ -79,32 +94,59 @@ export const dragEventList = (setOtherProps, otherProps) => {
       event.preventDefault();
       // 将拖动的元素到所选择的放置目标节点中
       // console.log('drop');
-      if (event.target.id === 'dropZone') {
-        let left = event.offsetX;
-        if (left > event.target.offsetWidth - draggedRef.offsetWidth - 10) {
-          console.log('拖拽到了图片区域外部,不能进行拖拽');
-          return false;
-        }
-        let top = event.offsetY;
-        let key = draggedRef?.dataset?.mes || draggedRef?.parentNode?.dataset?.mes;
-        let item = otherProps.signConfig.find((g) => {
-          return g.key === key;
-        });
-        if(!item){
-          return false;
-        }
-        // left = left - (item.x /2 );
-        // top = top - (item.y / 2);
-        item.x = left;
-        item.y = top;
-        // console.log(left, top);
-        setOtherProps({
-          ...otherProps,
-          signConfig: otherProps.signConfig,
-        })
-        draggedRef.style.left = left; // `${left}px`;
-        draggedRef.style.top = top; // `${top}px`;
+      // console.log(event.target);
+      console.log(event.clientX, event.clientY);
+      let infoClientRect = document.getElementById('dropZone').getBoundingClientRect();
+      let leftNew = Math.ceil(event.clientX - infoClientRect.left);
+      let topNew = Math.ceil(event.clientY - infoClientRect.top);
+      if(leftNew < 0 || leftNew > infoClientRect.width || topNew < 0 || topNew > infoClientRect.height){
+        console.log('拖拽到了图片区域外部,不能进行拖拽');
+        return false;
       }
+
+      let key = draggedRef?.dataset?.mes || draggedRef?.parentNode?.dataset?.mes;
+      let item = otherProps.signConfig.find((g) => {
+        return g.key === key;
+      });
+      if(!item){
+        return false;
+      }
+      item.x = leftNew;
+      item.y = topNew;
+      setOtherProps({
+        ...otherProps,
+        signConfig: otherProps.signConfig,
+      })
+      draggedRef.style.left = leftNew; // `${left}px`;
+      draggedRef.style.top = topNew; // `${top}px`;
+      return true;
+      //
+      // if (event.target.id === 'dropZone') {
+      //   let left = event.offsetX;
+      //   if (left > event.target.offsetWidth - draggedRef.offsetWidth - 10) {
+      //     console.log('拖拽到了图片区域外部,不能进行拖拽');
+      //     return false;
+      //   }
+      //   let top = event.offsetY;
+      //   let key = draggedRef?.dataset?.mes || draggedRef?.parentNode?.dataset?.mes;
+      //   let item = otherProps.signConfig.find((g) => {
+      //     return g.key === key;
+      //   });
+      //   if(!item){
+      //     return false;
+      //   }
+      //   // left = left - (item.x /2 );
+      //   // top = top - (item.y / 2);
+      //   item.x = left;
+      //   item.y = top;
+      //   // console.log(left, top);
+      //   setOtherProps({
+      //     ...otherProps,
+      //     signConfig: otherProps.signConfig,
+      //   })
+      //   draggedRef.style.left = left; // `${left}px`;
+      //   draggedRef.style.top = top; // `${top}px`;
+      // }
       return true;
     },
     false,

one_stop_public/libs/PictureSignature/styles.less

@@ -62,4 +62,5 @@
   top: 10;
   //border: 1px solid #f2f2f2;
   color: red;
+  z-index: 10000;
 }