CODEWITHSUNDEEP
reactjsdraggablereact-beautiful-dnd
Arseniy Klokad
Arseniy Klokad

Reputation: 31

How to make input draggable in beautiful dnd with react

I making list of Draggable items, im using React.js with react-beautiful-dnd I created the list but the problem that, it have input fields. I want that the fields also be draggable, i cant achieve this how many times I not tried, and how much I googled this problem. That's how my code looks like:

<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>

Upvotes: 3

Views: 2314

Answers (1)

Bart Krakowski
Bart Krakowski

Reputation: 1670

Dragging of interactive elements is prevented in react-beautiful-dnd, which is expected behavior. Take a look at these files: is-event-in-interactive-element.js and use-sensor-marshal.js

You can wrap your input component with another one (e.g. div or span)

Upvotes: 2

Related Questions