Instructor: 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.
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.
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.
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.
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.
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.