如何自己封装一个可以拖动的组件?

在React中创建一个可拖动的组件可以通过使用HTML5的draggable属性和监听dragstart, drag, dragend, dragenter, dragover, 和 drop事件来实现。下面是一个简单的例子，展示如何用React Hooks封装一个可拖动的函数组件。

首先，确保你的项目中已经安装了React和React-DOM。

接下来，你可以创建一个名为DraggableBox的组件。这个组件将包括状态管理，以跟踪组件的位置，并在拖动时更新这些位置。

这里是一个基本的实现：

 

import React, { useState, useEffect, useRef } from 'react';

const DraggableBox = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const elementRef = useRef(null);

  useEffect(() => {
    const handleDragStart = (event) => {
      event.dataTransfer.setData('text/plain', '');
      event.dataTransfer.effectAllowed = 'move';
    };

    const handleDrag = (event) => {
      setPosition({
        x: event.clientX - elementRef.current.offsetLeft,
        y: event.clientY - elementRef.current.offsetTop
      });
    };

    const handleDragEnd = () => {
      // 拖动结束时的处理
    };

    elementRef.current.addEventListener('dragstart', handleDragStart);
    elementRef.current.addEventListener('drag', handleDrag);
    elementRef.current.addEventListener('dragend', handleDragEnd);

    return () => {
      elementRef.current.removeEventListener('dragstart', handleDragStart);
      elementRef.current.removeEventListener('drag', handleDrag);
      elementRef.current.removeEventListener('dragend', handleDragEnd);
    };
  }, []);

  return (
    <div
      ref={elementRef}
      draggable
      style={{
        width: '100px',
        height: '100px',
        background: 'red',
        position: 'absolute',
        left: position.x,
        top: position.y,
        cursor: 'move'
      }}
    >
      Drag Me!
    </div>
  );
};

export default DraggableBox;

 

然而，上面的例子有一个问题，即handleDrag函数中的计算方式并不正确地反映了元素的实际位置。正确的做法是使用setCapture和releaseCapture来更准确地跟踪鼠标移动，或者使用更复杂的库如react-draggable来处理拖放逻辑，这样可以避免许多与浏览器兼容性和性能相关的问题。

如果你想要一个更健壮的解决方案，可以考虑使用像react-draggable这样的第三方库，它提供了一个现成的可拖动组件，你只需要简单地引入并使用即可。这将节省你的时间，并且通常会比自己实现更加稳定和高效。

来源出处通义