(JSVUEREACT) div拖拽移动+控制大小（高度、宽度） 及 单独只控制div的宽度

在React中，可以使用react-resizable库来实现一个可拖拽并且可调整大小的div。以下是一个简单的例子，演示如何实现这个功能：

首先，安装react-resizable库：

npm install react-resizable

然后，在React组件中使用它：

import React, { useState } from 'react';
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';
 
const ResizableBox = () => {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);
 
  const onResize = (e, { size }) => {
    setWidth(size.width);
    setHeight(size.height);
  };
 
  return (
    <div>
      <Resizable
        width={width}
        height={height}
        onResize={onResize}
        draggableOpts={{
          cancel: 'div.no-drag',
        }}
      >
        <div className="no-drag">
          拖拽我改变大小
        </div>
      </Resizable>
    </div>
  );
};
 
export default ResizableBox;

在上面的代码中，Resizable组件是可拖拽和可调整大小的。width和height状态变量用于跟踪div的尺寸。onResize回调函数在每次大小更改时被调用，并更新尺寸状态。draggableOpts用于指定不可拖动的元素，例如div.no-drag。

要独立控制宽度，可以移除height相关的状态和事件处理，只保留宽度（width）相关的部分。

注意：react-resizable库需要依赖于react-draggable库，确保安装了所需的依赖。