react-iframe-drag

react-iframe-drag is Implementation of online visual iframe drag and drop scheme

Installing

npm install react-iframe-drag

Exports

import {useSortable, useDrag, useIframeDrop, DragView, DropView } from 'react-iframe-drag

export const componentList = [
  {
    id: '1',
    title: 'ImageList',
    name: 'ImageList',
  },
  {
    id: '2',
    title: 'Goods',
    name: 'Goods',
  },
  {
    id: '3',
    title: 'Box',
    name: 'Box',
  },
];
function DragList() {
  const postMessage = (data) => {
    try {
      const iframe = document.getElementById('iframe-wrr');
      console.log(iframe.contentWindow);
      iframe.contentWindow.postMessage(data, '*');
    } catch (error) {
      console.log(error);
    }
  };
  useDrag({
    refDom: refDom.current,
    id:  "iframe-wrr",
    onDrag: (data) => {
      postMessage({ ...data, type: 1 });
    },
    onDragEnd: (data) => {
      postMessage({ ...data, type: 1, isAdd: true });
    },
    onDragOver: () => {},
    onDragLeave: () => {
      postMessage({ type: -1 });
    },
  });
  return (
    <div className={styles.dragList} ref={refDom}>
      {componentList.map((item, index) => (
        <DragView id={item?.id} item={item}>
          <div className={styles.box}>{item.name}</div>
        </DragView>
      ))}
    </div>
  );
}