Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps
In react-beautiful-dnd there is a separation between what is being dragged (a Draggable), and how a user drags it (a drag handle). This lesson will explain this distinction and show you how you can control what the drag handle is for a Draggable.
A <Draggable /> child function receives a provided object. This object has a property called dragHandleProps. This property gives us the ability to designate what part of the <Draggable /> the user interacts with for drag and drop. You’ll see how to pass this prop to a separate React component to designate control.
Instructor: [00:00] The drag handle is the part of the draggable that is used to control the dragging of the entire draggable. For our task component, the draggable and the drag handle are the same component. This means, we can drag our task from anywhere on the task.
[00:21] However, that is not need to be the case. Let's create a new handle component to control the task. Now we're getting an error, because we haven't created this component yet. Let's go ahead and do that.
[00:41] Now, I'm using a div for this drag handle, but you can use any element type that you like. I'm going to give it a width of 20 pixels, and a height of 20 pixels, background color of orange, border radius of 4 pixels. Now, we want our drag handle to sit on the left of our content.
[01:08] I'm going to convert our container into a flex parent. What's that? That's a margin on the handle. Even though we've created this drag handle, we can still drag the draggable from any part of it. That's because, we're still applying the drag handle props to the container.
[01:35] To designate our handle component as the drag handle, all we need to do is, spread the drag handle props on to this component. Now, we'll say that we no longer able to drag the draggable from the content. We can now only drag the task from the handle component, and this is also true for keyboard dragging.
[02:01] Having custom drag handles is a really useful feature. However, in our task, this application, I don't think its necessary. As I think it is a nice experience to be able to drag the task from anywhere on the task. I'm not going to preserve this particular change in our next lesson.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!