在 docs它说:
DragHandleProps
need to be applied to the node that you want to be the drag handle. This is a number of props that need to be applied to the<Draggable />
node. The simplest approach is to spread the props onto the draggable node ({...provided.dragHandleProps}
). However, you are also welcome to monkey patch these props if you also need to respond to them.DragHandleProps
will benull
whenisDragDisabled
is set to true.
dragHandleProps
Type information
type DragHandleProps = {|
// what draggable the handle belongs to
'data-rbd-drag-handle-draggable-id': DraggableId,
// What DragDropContext the drag handle is in
'data-rbd-drag-handle-context-id': ContextId,
// Id of hidden element that contains the lift instruction (nicer screen reader text)
'aria-labelledby': ElementId,
// Allow tabbing to this element
tabIndex: number,
// Stop html5 drag and drop
draggable: boolean,
onDragStart: (event: DragEvent) => void,
|};
我要附上onDragStart
到Draggable
这样只有在拖动特定的一组元素时才会触发它(而不是将其附加到 DragDropContext
)。使用我做的文档中的示例:
<Draggable draggableId="draggable-1" index={0}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
onDragStart={() => console.log('onDragStart')}
>
Drag me!
</div>
)}
</Draggable>
但是它似乎不起作用。任何想法如何使它工作?
最佳答案
它只能在 DragDropContext 中用于 Draggable 元素。
<DragDropContext
onDragStart={()=>{alert('onDragStart')}}
onDragEnd={()=>{alert('onDragEnd')}}>
</DragDropContext>
关于javascript - 如何在 react-beautiful-dnd 中将 onDragStart 附加到 Draggable?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59167128/