Я пытаюсь реализовать React Beautiful DnD для своего приложения. Однако я заметил довольно любопытную проблему.
Исходный список перед перетаскиванием
Я заметил, что когда я пытаюсь перетащить элементы, все остальные элементы (элементы, которые не перетаскиваются) в списке смещаются вправо.
Список во время перетаскивания
Изначально я подумал, что это проблема CSS, поэтому попытался удалить весь CSS, но проблема упорствовал. Я также понимаю, что в текущем коде ниже, но с тех пор я исправил работу функции onDragEnd, но проблема все еще сохраняется. Из-за этой проблемы перетаскиваемые элементы всегда будут располагаться сверху, несмотря на то, что я хочу разместить их в других местах.
Ниже приведен мой код:
import { SysFooterButtonGroup, SysProFormInput, TranslatedMessage } from '@comp/components-mobile';
import { Form } from 'antd-mobile';
import React, { useEffect } from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
const BillItem: React.FC = () => {
const [form] = Form.useForm();
const analysisTemplateItemGroups = Form.useWatch('analysisTemplateItemGroups', form);
const [items] = React.useState([
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
form.setFieldValue('analysisTemplateItemGroups', items);
useEffect(() => {
console.log(analysisTemplateItemGroups, 'analysisTemplateItemGroups useEffect');
}, [analysisTemplateItemGroups]);
const onDragEnd = (result: DropResult) => {
if (!result.destination) {
return;
}
const items = [...(analysisTemplateItemGroups || [])];
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);
form.setFieldValue('analysisTemplateItemGroups', items);
};
return (
style={{
padding: '20px',
maxWidth: '600px',
margin: '0 auto',
position: 'relative',
overflow: 'visible',
}}
>
Testing Drag
{(provided) => (
{analysisTemplateItemGroups?.map((item, dragIndex) => (
{(provided, snapshot) => (
{item.name}
)}
))}
{provided.placeholder}
)}
);
};
export default BillItem;
Подробнее здесь: https://stackoverflow.com/questions/798 ... -the-right
