Blue border functionality

src/components/dropWrapper/index.tsx

@@ -118,7 +118,6 @@ const DropWrapper: React.FC<Props> = ({
       setColumnNumber(true);
       return;
     }
-
     if (
       event.currentTarget.contains(event.relatedTarget) ||
       event?.target?.innerHTML?.includes('span')

src/components/leftPanel/index.tsx

@@ -295,6 +295,9 @@ const LeftPanel: React.FC<any> = ({
                 CTID={card?.CTID}
                 id={card.Id}
                 type={card?.URI}
+                isDraggableCardVisibleMethod={(isDragTure: boolean) =>
+                  setDraggableCardVisible(isDragTure)
+                }
                 setLeftpanelSelectedElem={setLeftpanelSelectedElem}
               />
             ))}

src/components/multiCards/index.tsx

@@ -61,6 +61,7 @@ interface Props {
   setIsConditionalEditing?: (a: boolean) => void;
   isConditionalEditing?: (a: boolean) => void;
   getComponentConditionData?: (data: any) => void;
+  abc: (a: any) => void;
 }
 
 const MultiCard: React.FC<Props> = ({
@@ -89,6 +90,7 @@ const MultiCard: React.FC<Props> = ({
   setDraggableCardVisible,
   setIsConditionalEditing,
   getComponentConditionData,
+  abc,
 }) => {
   const [showPopover, setShowPopover] = useState(false);
 
@@ -119,6 +121,7 @@ const MultiCard: React.FC<Props> = ({
   };
 
   const onDragStart = (e: any) => {
+    abc(null);
     updateXarrow();
     setIsZoomDisabled(true);
     const target = e.target;
@@ -154,6 +157,7 @@ const MultiCard: React.FC<Props> = ({
     !!setDraggableCardVisible && setDraggableCardVisible(false);
 
     e.target.style.visibility = 'visible';
+
     updateXarrow();
   };
 
@@ -335,20 +339,30 @@ const MultiCard: React.FC<Props> = ({
           (level: any) => data?.HasProgressionLevel === level?.CTID
         )?.Name
       : 'Pathway';
+
+  const onDropHandler = (e: any, draggableSide: string) => {
+    abc({ ...data, draggableSide });
+  };
+
   return (
     <>
       {isDraggableCardVisible ? (
         <div className={styles.draggableAreaContainer} id={CTID?.toString()}>
           <div
             id="verticalBorder"
             draggable={true}
+            onDrop={(e: any) => onDropHandler(e, 'left')}
             className={styles.draggableAreaBox}
           ></div>
           <div id="multiCard-Wrapper">
-            <div
-              id="horizontalBorder"
-              className={styles.draggableAreaBox + ' ' + styles.hori}
-            ></div>
+            {data.RowNumber > 1 && (
+              <div
+                id="horizontalBorder"
+                draggable
+                onDrop={(e: any) => onDropHandler(e, 'upper')}
+                className={styles.draggableAreaBox + ' ' + styles.hori}
+              ></div>
+            )}
             <div
               className={`${styles.multiCardWrapper} ${
                 (skipPreSelect && isAddDestination && destinationComponent) ||
@@ -588,10 +602,15 @@ const MultiCard: React.FC<Props> = ({
             </div>
             <div
               id="horizontalBorder"
+              onDrop={(e: any) => onDropHandler(e, 'lower')}
               className={styles.draggableAreaBox + ' ' + styles.hori}
             ></div>
           </div>
-          <div className={styles.draggableAreaBox}></div>
+          <div
+            className={styles.draggableAreaBox}
+            id="verticalBorder"
+            onDrop={(e: any) => onDropHandler(e, 'right')}
+          ></div>
         </div>
       ) : (
         <div