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:
react-beautiful-dnd
to ignore events emitted from certain targetsor
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.