React-beautiful-dnd: support lockaxis feature

[dagadbm]

Hello guys,

I know a ticket for this has already been opened and closed because for now support for lock axis isn't part of the atlassian use case but it may be a use case of different people (such as my case for example) which prevents me from using this framework making me have to switch to an inferior one.

Would you pretty please consider adding lock axis support?

I'm sure there are other people that ended up not using this framework because of that.

Thank you for your time.

[alexreardon]

From the docs:

Application 5: no drag axis locking

For now, the library does not support drag axis locking (aka drag rails). This is where the user is restricted to only dragging along one axis. The current thinking is this breaks the physical metaphor we are going for and sends a message to the user that they are interacting with a piece of software rather than moving physical objects around. It is possible to ensure that a user can only drop in a single list by using props type and isDropDisabled. You can also do some visual treatment to the list onDragStart to show the user that this is the only place they can interact with.

[malimccalla]

Any update on this? Would love to see a lock axis feature soon

[alexreardon]

See https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/about/design-principles.md#application-5-no-drag-axis-locking

That said, you could try to hack it by patching the transform in the DraggableStyle

[alexreardon]

It looks like a lot of people want this. I'm open to talking about it more

[ecumene]

The current thinking is this breaks the physical metaphor we are going for and sends a message to the user that they are interacting with a piece of software rather than moving physical objects around

Organizing things on a rail can be physical, like Apple's date picker.

It's not exactly drag-and-drop, but it is a physical UI and it shows rails can have a useful aesthetic purpose.

My use case for locked-axis draggables is slides in a presentation. There's a reordering animation there that is really pleasant, but when a user moves the draggable out of the slide list it clips under the presentation and gives the user the impression that they can do something more with it by moving it somewhere in the UI.

That said, you could try to hack it by patching the transform in the DraggableStyle

This only partially works... The draggable follows the cursor on one axis fine, but if the draggable moves too far in the locked direction and its width is too small, the gap for dropping closes (even though the draggable's UI is still in the list). Hacks are hacks, and this one only really works when your draggables are large enough.

It works for the slide reordering fine, because our slide cards are fairly large and there's no chance of that confusing animation happening. But for others this this may not work as well, and there's most definitely more reasons than the one I gave.

This could cause usability problems, for example interaction with other droppable parents. Movement from one board to the other wouldn't be possible when the axis is locked. I don't think this is inherently a bad thing, because the most common case for "locked axis" is a 1-Dimensional list.

@alexreardon If you are open to supporting something like this, would you consider jalkoby's PR or Benjaki2's fork to be possible accepted solutions to this issue?

Thanks for reading!

[mflash123]

Still waiting for axis locks...

[Halimazeez]

That said, you could try to hack it by patching the transform in the DraggableStyle

Here's how I've y-axis locked my verticle list, so the Draggable's can only be dragged up and down, by overriding the transform when dragging for the x-asis.

function getStyle(style, snapshot) { 
  if (style.transform) {
    const axisLockY =
      "translate(0px" +
      style.transform.slice(
        style.transform.indexOf(","),
        style.transform.length
      );
    return {
      ...style,
      transform: axisLockY
    };
  }
  return style;
}

And adding the style to the child of the Draggable component using the draggable props:

style={getStyle(
  draggableProvided.draggableProps.style,
  draggableSnapshot
)}

[woolfius]

nice solution

function getStyle(style, snapshot) {
if (style.transform) {
const axisLockY =
"translate(0px" +
style.transform.slice(
style.transform.indexOf(","),
style.transform.length
);
return {
...style,
transform: axisLockY
};
}
return style;
}
```

And adding the style to the child of the Draggable component using the draggable props:

```js
style={getStyle(
draggableProvided.draggableProps.style,
draggableSnapshot
)}

and you can simplify it to

function getStyle(style, snapshot) { return { ...style,style.transform ? 'translate(0px',+style.transform.split(',')[1] : null, }; }

[zhongzhong0505]

Still waiting for axis locks...

[dagadbm]

It will never happen.

On Wed, Nov 4, 2020, 02:51 zhongzhong [e-mail] wrote:

Still waiting for axis locks...

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/538#issuecomment-721482308,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AD7WGR5XFE24OQH2FQ2FQ3DSOC6TXANCNFSM4FC4EKNQ
.

[dagadbm]

well I havent been here a while :p

Might as well ask: is this a feasible thing to do using plain on Drag and Drop API from the browser?
how would you block the dragged item from moving past the container?