DraggableTest

import React, { useRef, useEffect } from 'react';
import interact from 'interactjs';

const ResizableIframe: React.FC = () => {
  const resizableRefs = useRef<Array<HTMLDivElement | null>>([]);
  const iframeRefs = useRef<Array<HTMLIFrameElement | null>>([]);

  const handleResizeStart = (event: any) => {
    const target = event.target;
    target.setAttribute('data-x', target.offsetLeft);
    target.setAttribute('data-y', target.offsetTop);

    const index = resizableRefs.current.indexOf(target);
    iframeRefs.current[index]?.style.setProperty('pointer-events', 'none');
  };

  const handleResizeMove = (event: any) => {
    const target = event.target;
    const x = parseFloat(target.getAttribute('data-x')) || 0;
    const y = parseFloat(target.getAttribute('data-y')) || 0;

    const index = resizableRefs.current.indexOf(target);
    if (resizableRefs.current[index]) {
      resizableRefs.current[index].style.width = event.rect.width + 'px';
      resizableRefs.current[index].style.height = event.rect.height + 'px';

      const newX = x + event.deltaRect.left;
      const newY = y + event.deltaRect.top;

      resizableRefs.current[index].style.transform = `translate(${newX}px, ${newY}px)`;

      target.setAttribute('data-x', newX.toString());
      target.setAttribute('data-y', newY.toString());
    }
  };

  const handleResizeEnd = () => {
    iframeRefs.current.forEach((iframe) => {
      if (iframe) {
        iframe.style.setProperty('pointer-events', 'auto');
      }
    });
  };

  useEffect(() => {
    resizableRefs.current.forEach((resizableRef, index) => {
      if (resizableRef) {
        interact(resizableRef)
          .resizable({
            edges: { bottom: true, right: true },
            restrictEdges: {
              outer: 'parent',
              endOnly: true,
            },
            restrictSize: {
              min: { width: 50, height: 50 },
            },
            inertia: true,
          })
          .on('resizestart', handleResizeStart)
          .on('resizemove', handleResizeMove)
          .on('resizeend', handleResizeEnd);
      }

      const draggableRef = resizableRef?.querySelector('.draggable-window');
      const iframeRef = resizableRef?.querySelector('embed');

      if (draggableRef && iframeRef) {
        interact(draggableRef)
          .draggable({
            inertia: true,
            modifiers: [
              interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true,
              }),
            ],
            autoScroll: true,
            listeners: {
              move: (event) => dragMoveListener(event, index),
            },
          })
          .on('dragstart', () => handleDragMoveStart(index))
          .on('dragend', handleDragMoveEnd);
      }
    });
  }, []);

  const handleDragMoveStart = (index: number) => {
    iframeRefs.current[index]?.style.setProperty('pointer-events', 'none');
  };

  const handleDragMoveEnd = () => {
    iframeRefs.current.forEach((iframe) => {
      if (iframe) {
        iframe.style.setProperty('pointer-events', 'auto');
      }
    });
  };

  const dragMoveListener = (event: any, index: number) => {
    const target = resizableRefs.current[index];
    const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

    target.setAttribute('data-x', x.toString());
    target.setAttribute('data-y', y.toString());
  };

  return (
    <>
      <div className="window" ref={(el) => (resizableRefs.current[0] = el)} style={{ transform: 'translate(0px, 0px)' }}>
        <div className="border-window">
          <div className="draggable-window">Draggable frame 1</div>
          <embed src="https://gummysearch.com/?utm_source=iframetester.com" ref={(el) => (iframeRefs.current[0] = el)}></embed>
        </div>
      </div>

      <div className="window" ref={(el) => (resizableRefs.current[1] = el)} style={{ transform: 'translate(0px, 0px)' }}>
        <div className="border-window">
          <div className="draggable-window">Draggable frame 2</div>
          <embed src="https://gummysearch.com/?utm_source=iframetester.com" ref={(el) => (iframeRefs.current[1] = el)}></embed>
        </div>
      </div>
      {/* Add more windows as needed */}
    </>
  );
};

export default ResizableIframe;