Flutter中如何让Draggable拖动的图片移出橙色容器区域后消失

• 给橙色容器绑定ref获取它的可视区域边界坐标
• 监听Draggable组件的拖动事件（onDrag/onStop均可，按需选择），实时获取被拖动图片的当前位置
• 对比两者的边界值，只要图片超出容器范围（可按需调整判断规则），就直接从渲染树中移除该图片，而非仅设置隐藏样式
• 这种实现方式满足「直接消失而非隐藏」的需求，不会在DOM中残留被隐藏的图片节点

import { useState, useRef } from 'react';
import Draggable from 'react-draggable';

export default function DragDemo() {
  // 控制图片是否渲染（true=显示，false=消失）
  const [showImage, setShowImage] = useState(true);
  // 橙色容器的ref，用于获取边界坐标
  const containerRef = useRef(null);

  const handleDragStop = (e, data) => {
    const containerRect = containerRef.current.getBoundingClientRect();
    // 计算拖动结束后图片的实际边界坐标，100为示例图片宽高，可替换为实际值
    const imgLeft = data.x;
    const imgRight = data.x + 100;
    const imgTop = data.y;
    const imgBottom = data.y + 100;

    // 判断是否超出橙色容器边界
    const isOutOfContainer = 
      imgLeft < 0 || 
      imgRight > containerRect.width || 
      imgTop < 0 || 
      imgBottom > containerRect.height;

    // 超出则直接移除图片
    if (isOutOfContainer) {
      setShowImage(false);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      {/* 橙色容器 */}
      <div 
        ref={containerRef}
        style={{
          width: '500px',
          height: '500px',
          backgroundColor: 'orange',
          position: 'relative',
        }}
      >
        {showImage && (
          <Draggable
            onStop={handleDragStop}
          >
            <img 
              src="替换为你的图片地址" 
              alt="可拖动图片" 
              style={{ width: '100px', height: '100px', position: 'absolute', cursor: 'grab' }}
            />
          </Draggable>
        )}
      </div>
    </div>
  );
}

• 如果你需要拖动过程中只要移出就立刻消失，把onStop替换为onDrag即可，不用等用户松开鼠标
• 如果需要限制拖动过程中不能超出容器，可以给Draggable加bounds="parent"参数
• 如果图片尺寸是动态的，可以给图片也加ref，通过imgRef.current.getBoundingClientRect()获取宽高，不用写死固定值

内容的提问来源于stack exchange，提问作者user17238293