如何通过反应使输入在漂亮的 dnd 中可拖动

Posted 2023-05-08

【中文标题】如何通过反应使输入在漂亮的 dnd 中可拖动

【英文标题】：How to make input draggable in beautiful dnd with react

【发布时间】：2022-01-06 09:02:18

【问题描述】：

我制作了可拖动项目的列表，我使用带有 react-beautiful-dnd 的 React.js 我创建了列表，但问题是它有输入字段。我希望这些字段也是可拖动的，我没有尝试多少次，以及我在谷歌上搜索了多少这个问题。这就是我的代码的样子：

<DragDropContext onDragEnd=handleOnDragEnd>
      <Droppable droppableId="characters">
        (provided) => (
          <ul
            className="characters"
            ...provided.droppableProps
            ref=provided.innerRef
          >
            characters.map(( id, name, thumb , index) => 
              return (
                <Draggable key=id draggableId=id index=index>
                  (provided) => (
                    <li
                      ref=provided.innerRef
                      ...provided.draggableProps
                      ...provided.dragHandleProps
                    >
                      <div className="characters-thumb">
                        <img src=thumb alt=`$name Thumb` />
                      </div>
                      <input
                        defaultValue=name
                        draggable="true"
                        onDragStart=(event) =>
                          event.dataTransfer.setData(
                            "text/plain",
                            "This text may be dragged"
                          )
                        
                      />
                    </li>
                  )
                </Draggable>
              );
            )
            provided.placeholder
          </ul>
        )
      </Droppable>
    </DragDropContext>

【参考方案1】：

在react-beautiful-dnd 中阻止了交互元素的拖动，这是预期的行为。 看看这些文件：is-event-in-interactive-element.js 和 use-sensor-marshal.js

您可以用另一个组件包装您的输入组件（例如 div 或 span）