stop reordering

[Vishal1419]

Bug or feature request?

possibly a feature-request

I have 5 stages. I am moving cards from one stage to another by drag and drop. Cards in all the stages are sorted by last updated date. So, when I drag a card from one stage to another, the last updated date of card will be updated. So, my card should always be added to the top of the stage.

In this scenario, it looks foolish to reorder a card as it will be always added to the top. So, I want to stop the reordering of card even when animating it. So, when user drags a card he should see that it will be added to the top of the lane instead of any other order.

[alexreardon]

When you move into the new list items will naturally move out of the way. This will be the wrong interaction if you can only drop on the top of the list. You could probably use some smoke and mirrors to achieve what you are after but my head is not up to it atm.

The big idea would be that you would need to tell everything except the item dragging that it needs to be ignored by the system...

I'll think about this one later!

However the big thing to note is that your specific pattern is not currently supported

[TheMoonDawg]

We also have a use case very similar to this. Would be a nice thing to see sometime in the future!

[SPAHI4]

I also need to disable sort.

[neorth]

I have a similar issue with nested draggables. My app consists of manually sortable groups that themselves are droppables with draggables that are sorted automatically. Ideally I would like to disable the interactive reordering when dragging those inner draggables.

[mattkrick]

did anyone find a clever way to achieve this? @Vishal1419

[Otoris]

Bumping this. Could be really useful with some patterns.

[andrewbusch7]

I'm looking for a feature like this as well. We're building something similar to JIRA, and we want the rule that if status is changing (i.e. moving to another list), then priority isn't changing (i.e. the global ordering of the cards don't change). In JIRA, you see an overlay appear over the list, and upon dropping it, it appears in the location that matches its global order. This conceptually sounds the same as the OP's request.

[a-m-dev]

any solution yet for preventing from reorder while dragging ?????????

[matteing]

Any ideas?

[woohling]

We have a similar situation here. We need to drag cards among different lists. Depending on different scenarios, some can drop the card into the list and reorder it among other cards in the same list, some can only drop the card into the list but reordering is forbidden due to specific logic.

It would be much better if react-beautiful-dnd provides a more flexible interface to accommodate various situation.

There's a big assumption here that interaction should be the ultimate result, but interaction often plays along with different business logic which we're quite constrained by it.

[SandMoshi]

I'm also bumping this. Maybe we can add a prop that visually acts like isDroppable but it allows you to still drop?

I tried a hack with using onDragUpdate to set isDroppable to true whenever the target index > 1 but it caused an infinite loop and crashed the app.

@alexreardon

[realfresh]

I think the main thing everyone is looking for is the ability to move an item to another list, and not have that list shuffle around as you will be sorting it automatically. When the items shuffle, it gives the illusion that the user has control over the sort order and when they drop the item, the list reorders making it look funky.

My solution which works is to create a white box with position absolute covering the lists when the user starts the drag. The box just says "Drop here to x". This way the items below the cover may shuffle but the user at least doesn't see it. Simple but it works. Hope this helps someone.

[yr-primexm]

Possible workaround: set in css transform: none!important; on all items except the one the is being dragged

[kwhitaker]

Possible workaround: set in css transform: none!important; on all items except the one the is being dragged

I implemented this solution and it works, though it's not ideal. I'd love to just see a prop or something that would let us turn this behavior off.

Our solution:

export const maybeLockTransform = (
  isDragging: boolean,
  style: DraggingStyle | NotDraggingStyle
): DraggingStyle | NotDraggingStyle => {
  const transform = isDragging ? style.transform : "none !important";
  return { ...style, transform };
};

[kwhitaker]

On further testing, my above solution breaks down if the user drags an item from List A, but then drops it back on List A. The item being dragged ends up being dropped on top of the nearest element in List A, and I can't seem to find a way to reset the transform after that 😢

[Lukavyi]

Made a fix using isDropDisabled for 2 elements in 1 list.

[madox2]

I've managed to stop reordering by hiding placeholder:

<div style={{ visibility: 'hidden', height: 0 }}>
  {provided.placeholder}
</div>

[sixfirst]

I've managed to stop reordering by hiding placeholder:

<div style={{ visibility: 'hidden', height: 0 }}>
  {provided.placeholder}
</div>

not working for me...

[isaackeyet]

This will do it, but is pretty hacky and performance could be a lot better if the DOM didn't have to update so much anyway: (props @yr-primexm)

.draggablecontainerhere > div {
  transform: none !important;
}

Would love to see a new prop for this instead. We're also creating a business-oriented workflow and columns are sorted statically.

[jianga]

I'm looking for this too - trying to swap two items between two lists and within a list. The animation that reorders doesn't make sense for that use case.

[Morphexe]

Same situation, I actually just want to be able to swap items in a list. And not reordering.

[buzinas]

I ended up with a future-proof work-around while there isn't something official from the libraries creator: https://codesandbox.io/s/vertical-list-with-multiple-drop-targets-sr0wl

Basically I create an empty fake Droppable on top of the real Droppable that's only visible when it's being dragged over. When someone drops a Draggable on top of it, I just assume it was dropped on the real one. By doing that, we don't rely on changing the library internals.

PS: The code above could be simplified a lot, I just took one of the examples and tested this idea.

[simo-eskalera]

It's a bummer that react-beautiful-dnd is a not a general dnd solution. It should be clearly noted that this is a LIST DND+SORTING library. Basic behavior (no sorting) is missing here.

We also have a basic dnd requirement where an online quiz consists of labels that the user has to drag to one of a few buckets. The order of labels when dragged is irrelevant. Having the sorting behavior in this case will only confuse the user.

[alexreardon]

Once 12.0 is out we can look at this one.

Related:

• 1390

• 216

[Burdigalax]

I did it ! 🎉

1 - Disabled placeholder

Exemple

        <Droppable
          droppableId={`inventory-id-${idInventory}`}
          type="category-id-all"
        >
          {({ innerRef, placeholder, droppableProps }) => (
            <ItemsList ref={innerRef} {...droppableProps}>
              {itemsIds.map(renderItem)}
              <span
                style={{
                  display: "none"
                }}
              >
                {placeholder}
              </span>
            </ItemsList>
          )}
        </Droppable>

2 - Disabled animation translate except item isDragging.

function getStyle(style, snapshot) {
  if (!snapshot.isDragging) return {};
  if (!snapshot.isDropAnimating) {
    return style;
  }

  return {
    ...style,
    // cannot be 0, but make it super tiny
    transitionDuration: `0.001s`
  };
}

// [...]

<Draggable
    draggableId={`draggable-item-id${idItem}-inventory-id${idInventory}`}
    key={`draggable-${idItem}-${idInventory}`}
    index={index}
  >
    {({ innerRef, draggableProps, dragHandleProps }, snapshot) => (
      <div
        ref={innerRef}
        {...dragHandleProps}
        {...draggableProps}
        style={getStyle(draggableProps.style, snapshot)}
      >
                // [...]
      </div>
)}
</Draggable>

Exemple

[kylecombes]

@alexreardon any updates on whether or not a prop to disable animations might be added?

[ghost]

@Burdigalax hugely helpful. Saved hours. Thanks!

[vrinceanuv]

An official solution would be nice @alexreardon

[ghost]

raggablecontainerhere > div { transform: none !important; }

This is good!

[iskarica]

a different solution worked for me. working on something similar to board example but the user is able to set sorting on individual stages/columns so in that case:

• prevent reordering inside that column
• allow dropping to the top of the column (without reordering animation)
• allow dragging items from that column to others

column (regular):

<Droppable>
  <Draggable />
  <Draggable />
  ....
</Droppable>

column (sorted):

<OuterDroppable> ----> same droppable as in example above but when something dropped it will always have index 0 (works for me)
  <InnerDroppable isDropDisabled={true}> ----> Nothing can be dropped here, still can drag items inside to other columns
    <Draggable />
    <Draggable />
    ....
  <InnerDroppable>
</OuterDroppable>

The only issue I had is when moving stuff from InnerDroppable it takes that DroppableId instead of outer. solution: use OuterDroppable droppableID,add some suffif e.g. -sorted and just strip it later.

[mochetts]

I'm here for the same! would be nice to have a prop for this.

[jnorvell]

What is the solution to this closed issue? Is there a new property on draggable that allows us to disable item reordering?

[trisDeveloper]

I did it ! 🎉

1 - Disabled placeholder

Exemple

        <Droppable
          droppableId={`inventory-id-${idInventory}`}
          type="category-id-all"
        >
          {({ innerRef, placeholder, droppableProps }) => (
            <ItemsList ref={innerRef} {...droppableProps}>
              {itemsIds.map(renderItem)}
              <span
                style={{
                  display: "none"
                }}
              >
                {placeholder}
              </span>
            </ItemsList>
          )}
        </Droppable>

2 - Disabled animation translate except item isDragging.

function getStyle(style, snapshot) {
  if (!snapshot.isDragging) return {};
  if (!snapshot.isDropAnimating) {
    return style;
  }

  return {
    ...style,
    // cannot be 0, but make it super tiny
    transitionDuration: `0.001s`
  };
}

// [...]

<Draggable
    draggableId={`draggable-item-id${idItem}-inventory-id${idInventory}`}
    key={`draggable-${idItem}-${idInventory}`}
    index={index}
  >
    {({ innerRef, draggableProps, dragHandleProps }, snapshot) => (
      <div
        ref={innerRef}
        {...dragHandleProps}
        {...draggableProps}
        style={getStyle(draggableProps.style, snapshot)}
      >
                // [...]
      </div>
)}
</Draggable>

Exemple

works for me, Thanks!