Блог

Главная - Вопросы по программированию - Свойство перетаскивания React применяется только к конечному элементу в массиве

Свойство перетаскивания React применяется только к конечному элементу в массиве

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я хочу добавить элементы перетаскиваемого списка в свой DOM через JSX в react.

Ожидаемый вывод в DOM должен выглядеть следующим образом:

 <li draggable="true" style="border: 1px solid red;">Test Scenario 1</li>
<li draggable="true" style="border: 1px solid red;">Test Scenario 2</li>
<li draggable="true" style="border: 1px solid red;">Test Scenario 3</li>

Но фактический результат:

 <li style="border: 1px solid red;">Test Scenario 1</li>
<li style="border: 1px solid red;">Test Scenario 2</li>
<li draggable="true" style="border: 1px solid red;">Test Scenario 3</li>

Текущий код, который я пробовал:

 import React from 'react';
import { useDrag } from "react-dnd";

function LibraryItems(props) {

    const [{ isDragging }, dragRef] = useDrag(() => ({
        type: "li",
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    }));

    
    // Declare and populate array of Library Scenarios
    const itemList = []
        
    props.items.map(item => {
        itemList.push(<li style={{border: 'red 1px solid'}} ref={dragRef}>{item.title}</li>);
    })

        
    return (
        <ul>
            {itemList}
        </ul>
    )
}

export default LibraryItems

Комментарии:

1. Вы перезаписываете ссылку каждым новым li , я не использовал React-dnd, но я полагаю, что у них, вероятно, есть способ создать несколько перетаскиваемых элементов без необходимости объявлять ссылку для каждого.

2. у вас должен быть dragRef для каждого li, который вы хотите перетаскивать. Другими словами, массив перетаскиваемых файлов, заданных из useDrag

Ответ №1:

Вам в основном нужно dragRef для каждого li , я бы сделал что-то вроде этого:

   const itemList = [];
  const drags = {};
  
  props.items.forEach((item) => {
    const drag = useDrag(() => ({
      type: "li",
      collect: (monitor) => ({
        isDragging: monitor.isDragging()
      })
    }));

    const [{ isDragging }, dragRef] = drag;

    drags[item.title] = drag;

    itemList.push(
      <li style={{ border: "red 1px solid" }} ref={dragRef} key={item.title}>
        {item.title}
      </li>
    );
  });

Если вы хотите проверить, например, перетаскивается ли конкретный li элемент, вы должны получить к нему доступ через его заголовок (они должны быть уникальными), например, для li, который имеет заголовок "li1" :

 console.log(drags["li1"][0].isDragging);

Рабочий CodeSandbox.

Метки: