1

I have been trying to implement a drag and drop functionality using the react-beautiful-dnd library. I am displaying some buttons from the initial state of redux and trying to make those items draggable. But, for some reasons,I am having an error in console saying that "Unable to find draggable element with id: " when trying to move the button elements. This is for the first time,I am trying to implement such functionalities and not sure where I have done the mistake. I know that the Droppable wrapper should have a droppableId but based on the structure of my state data, how can I pass the id? Here is my, ListItems components that I have modified to use the drag and drop logic:

import React from "react";
import { connect } from "react-redux";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const ListItems = props => {
  const onDragEnd = result => {
    console.log("drag end");
  };
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div>
        List Items
        <Droppable>
          {provided => (
            <div innerRef={provided.innerRef} {...provided.droppableProps}>
              {props.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {provided => (
                    <div
                      className="user-lists"
                      key={item.id}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      innerRef={provided.innerRef}
                    >
                      <button>{item.name}</button>
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );
};
const mapStateToProps = state => ({
  items: state.items.buttons
});
export default connect(
  mapStateToProps,
  {}
)(ListItems);

and then the ListItems component is used in App component.

For complete demo here is the sandbox link:

https://codesandbox.io/s/adoring-jones-roswh?file=/src/components/ListItems.js:0-1298

So, I fixed that problem and draggbale is working accordingly. But, now the problem is that I can't move the item by clicking or selecting the button elements rather I need to drag the button from the right side. probably because of the div element that wraps the buttons are handling the dragging. Any fixes to make the buttons draggable, would be nice..

ninja
  • 167
  • 2
  • 12
  • I got that working finally. the problem was, I was passing the id in the draggable props wrongly. It should be like this: `draggableId={"draggable-" + item.id}` . but now got something new, edited in my questions – ninja Jul 12 '20 at 01:23
  • https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md please check the usage of ref and you didn't add droppableId in your example. – Sharique Khan Jul 14 '20 at 09:18

0 Answers0