Autoplay

    Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps

    Alex ReardonAlex Reardon

    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.

    reactReact
    ^16.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss