2

I'm using react-beautiful-dnd:

<DragDropContext>
  <Droppable>
    {(provided, snapshot) => (
      <div>
       <Draggable><Item with Slider></Draggable>
       <Draggable><Item with Slider></Draggable>
       <Draggable><Item with Slider></Draggable>
       <Draggable><Item with Slider></Draggable>
       etc
      </div>
    )}
  </Droppable>
</DragDropContext>

My understanding is that Draggable will have some variety of event listeners to allow it to detect when it is clicked/clicked and dragged/etc.

The Slider component that I'm using will also have similar events (since I assume it provides similar event listeners to Draggable).

How can I either:

  1. Get react-beautiful-dnd to ignore events emitted from certain targets

or

  1. Stop event propagation so that react-beautiful-dnd doesn't receive an event?

The screenshot below shows two sliders - (1) a React component (material-ui) and (2) an <input type="range" /> component. The normal range works fine (doesn't trigger drag and drop) while the Slider does not.

Zach Smith
  • 8,458
  • 13
  • 59
  • 133
  • 1
    if the slider is not supporting `stopPropagation` maybe you can wrap it with your own component that register to those events and just call `stopPropagation`? – Sagiv b.g Feb 14 '20 at 15:12
  • 1
    Can I assume that an event handler of a child element will be called before an event handler of the parent? – Zach Smith Feb 15 '20 at 07:57

1 Answers1

1

See this:code sandbox

The key to accomplish this is to only add the spread {...provided.dragHandleProps} to the inner div and make sure that {...provided.dragHandleProps} is NOT on container parent which is usually the div which is the direct child of the <Draggable>

<Droppable droppableId="featureWidgets">
    {(provided: any) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
            <FeaturesListView>
            {featureWidgets.map(({id, type}, index) => {
                return (<Draggable key={id} draggableId={id} index={index}>
                            {(provided) => (
                                <div
                                    ref={provided.innerRef} {...provided.draggableProps} ///* NO NO not here  {...provided.dragHandleProps} */
                                    <div {...provided.dragHandleProps}>drag grip handle</div>
                                    <WidgetRow>
                                        <Slider/>
                                    </WidgetRow>
                                </div>
                            )}
                        </Draggable>);
                })}
            {provided.placeholder}
            </FeaturesListView>
        </div>
    )}
</Droppable>
hey68you
  • 51
  • 1
  • 6