React-beautiful-dnd: Make draggable undraggable

[nicubarbaros]

Is there a way to make draggable undraggable based on a boolean?

There is a boolean in dragHandleProps called draggable.
My attempt is this however it is not working.

const { post } = this.props;
    return (
      <Draggable draggableId={post._id}>
        {(provided, snapshot) => (
          <div>
            <div
              ref={provided.innerRef}
              style={getItemStyle(provided.draggableStyle, snapshot.isDragging)}
              {...provided.dragHandleProps}
              draggable={post.draggable}
              role="presentation"
            >
              <div className="postchip-container">
                <div
                  className={classnames('post-status', {
                    'post-status-approved': post.approved
                  })}
                />
                adad
                {provided.dragHandleProps.draggable}
                <div className="post-container">
                  <div className="post-title">{post.plainText || post.mediaType}</div>
                </div>
              </div>
            </div>
            {provided.placeholder}
          </div>
        )}
      </Draggable>
    );

[alexreardon]

You can disable dragging of a Draggable by using the isDragDisabled prop.

https://github.com/atlassian/react-beautiful-dnd#props-1

[nicubarbaros]

Its not working.
<Draggable draggableId={postId} isDragDisabled={published}>
where published is a boolean false or true. This will disable drag to all of my divs. And yes the boolean comes true and false for the right posts.

My workaround is to rewrite the onClick event for the top div in draggable. But would love a clean way :D Thank you

[alexreardon]

Can you please post a link to an example of the behaviour you are talking about?

[rfiroz]

@nicubarbaros were you able to resolve the problem you were facing and do you have the example? I'm facing similar issue and not sure how to work it out.
Thanks,

[jamesalexmorgan]

Btw, Thanks so much for this library awesome Atlassian team!!! It's an absolute joy to work with!

@alexreardon Quick question!

The animation behaviour that the escape key triggers is perfect for me!
I need to trigger that awesome animation, reverting their drag depending where they've tried to drop. If they dropped the item in an incorrect place in my list, it would be awesome for it to animate back to it's original position.

What could be awesome is a new hook, maybe called onBeforeDragEnd or onCheckCancel which could...

• run just before drag end, (maybe immediately on mouse up, so you can check before you start animating)
• expect a return value of true or false
  
  
  
  • If the function returns false, that would tell the DragDropContext to cancel and fire the cool escape reverting behaviour
  
  

This would let users write their own custom cancel logic! Yay! 🎉

Any thoughts?

[alexreardon]

interesting @jamesalexmorgan. Can you please raise a seperate issue for your idea?

[jomelmartyguiao]

I used the prop disabled not isDragDisabled.
It worked for me.

[gregorybellencontre]

Hello
I'm trying to avoid an element to be dropped at index 0.
I used isDragDisabled to avoid the first element to be moved, but I still can move another element to the first place.
Is it possible ?

[alexreardon]

Right now that is not possible @gregorybellencontre
But it might be possible with #1239