时间戳

首页 > 解决方案 > 使用 react-Beautiful-dnd，如何在拖动开始之前更改可拖动尺寸（onBeforeCapture）

react-beautiful-dnd - 使用 react-Beautiful-dnd，如何在拖动开始之前更改可拖动尺寸（onBeforeCapture）

问题描述

这是我在 onBeforeCapture() 响应程序期间找到的用于检索正确的可拖动元素并编辑其尺寸的代码。在此响应程序期间更改尺寸符合文档。这似乎只适用于改变尺寸，其他问题是我使用的是 renderClone 方法，因此可拖动对象只是以不接近正确鼠标位置的巨大偏移进行拖动。dnd 也将放置占位符视为可拖动是原始的大尺寸。有没有办法纠正这个鼠标位置和占位符尺寸？我已经考虑在可拖动的内部元素上添加 mouseDown/mouseUp 处理程序，但这似乎也不起作用。

const cardSize = 140;
const draggableAttr = "data-rbd-drag-handle-draggable-id";
const getAttr = (key: string, value: string) => `[${key}=${value}]`; 
const draggableQuery = getAttr(draggableAttr, update.draggableId);
const draggable = document.querySelector(draggableQuery);
draggable.setAttribute("style", `width: ${cardSize}px; height: ${cardSize}px;`);

标签： react-beautiful-dnd

解决方案

我注意到 onBeforeCapture 在 onDragEnd 之后触发（因此不正确地调整可拖动的大小），所以我创建了一些状态来记住最后一个 beforeCaptureResult 以及return它是否等同于当前结果。

推荐阅读