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

【问题标题】：How to make input draggable in beautiful dnd with react如何通过反应使输入在漂亮的 dnd 中可拖动
【发布时间】：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>

【问题讨论】：

标签： reactjs draggable react-beautiful-dnd

【解决方案1】：

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

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

【讨论】：