js实现鼠标拖拽改变div大小的同时另一个div宽度也变化

做完案例还是很懵逼

// useDrag 可以让一个 DOM 元素实现拖拽效果

// useDrop 可以让一个 DOM 元素能够放置拖拽元素

参考资料1

//React DnD

参考资料2

https://www.cnblogs.com/dtux/p/17468866.html

import React, { useState } from 'react';
import { useDrop, useDrag, DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import styles from './index.less';

const ItemTypes = {
  BOX: 'demo-app',
};
// useDrag 可以让一个 DOM 元素实现拖拽效果
// useDrop 可以让一个 DOM 元素能够放置拖拽元素

const Child = () => {
  const [{ isDragging }, drag] = useDrag({
    type: ItemTypes.BOX,
    item: { aa: '嘻嘻' }, //描述了要拖动的数据。这是可用于放置目标的有关拖动源的唯一信息
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <div
      className={styles.child}
      style={{ opacity: isDragging ? 0.5 : 1 }}
      ref={drag}
    >
      Child
    </div>
  );
};

const Container = () => {
  const [value, setValue] = useState();
  const [{ canDrop, isOver }, drop] = useDrop({
    accept: ItemTypes.BOX,
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
    drop: (item) => {
      setValue(item.aa);
      console.log('item', item.aa);
    },
  });

  return (
    <div
      className={styles.container}
      ref={drop}
      style={{ background: isOver ? '#FFAA00' : '#FFFFFF' }}
    >
      Container
      {value}
      {canDrop ? 'Release to drop' : 'Drag a box here'}
    </div>
  );
};

const DragDnd = (props) => {
  return (
    <>
      <div>
        <DndProvider backend={HTML5Backend}>
          <div className={styles.app}>
            <Child />
            <Container />
          </div>
        </DndProvider>
      </div>
    </>
  );
};
export default DragDnd;


   connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    isOverCurrent: monitor.isOver({ shallow: true }),
    canDrop: monitor.canDrop(),
    itemType: monitor.getItemType()



dnd-kit设置拖动区域

https://react-dnd.github.io/react-dnd/examples/sortable/stress-test