Перетащите элементы от указателя - PullRequest
Новая
       45

Перетащите элементы от указателя

0 голосов
/ 22 января 2020

Мне удалось создать список перетаскивания (с красивым пакетом dnd-реагировать), но создание его внутри перетаскиваемого элемента (реагирующего-перетаскиваемого) поставило меня перед проблемой анимации. Теперь, если я переместу перетаскиваемые и затем перетаскиваемые элементы, они будут находиться далеко от указателя. 

const makeList = () => {
    let component = [];
    let x = 0;
    for (let a in list) {
        component.push(<DNDrag key={a} draggableId={a} index={x}>
            {(provided, snapshot) => (
                <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                    )}
                >
                    {list[a]}
                </div>
            )}
        </DNDrag>);
        x = x + 1 ;
    }
    return component;
}
<Draggable
            handle=".handle"
            defaultPosition={{ x: 0, y: 0 }}
            position={null}
            grid={[1, 1]}
            scale={1}
            onStart={() => { }}
            onDrag={() => { }}
            onStop={() => { }}>
            <div className="handlearea">
                <div className="handle">{makeSomething()}</div>
                <DragDropContext onDragEnd={onDragEnd}>
                    <div>
                        <Droppable droppableId="droppable">
                            {(provided, snapshot) => (
                                <div
                                    {...provided.droppableProps}
                                    ref={provided.innerRef}
                                    style={getListStyle(snapshot.isDraggingOver)}
                                >
                                    {makeList()}
                                </div>
                            )}
                        </Droppable>
                    </div>
                </DragDropContext>
            </div>
        </Draggable>

в этом случае DNDrag - это перетаскивание красивого компонента dnd реагировать.

...