Way to block horizontal movement in case of vertical-list (& vice versa)

[AlanLes]

Hello, I'm wondering if there is an easy way to block horizontal movement in case of dragging elements on vertical list (and vice versa: way to block vertical movement in case of dragging elements on horizontal list)?

I'd like to have something like on this gif (it's some simple dnd-lib to angularjs), draw attention to cursor.

[justablob]

I was just looking for a way to do this, couldn't find anything except this issue.

[andrei-ivanovici]

The issue was already rased here #958 and it seems that there is no intention to add this feature

[neutti]

Try using Draggable tag as below

<Draggable draggableId="pickDrag" index={0} >
    {provided => {
        var transform = provided.draggableProps.style.transform
        if(transform){
            var t = transform.split(",")[1]
            provided.draggableProps.style.transform = "translate(0px," + t
        }
        return <Col>
            <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                VERTICAL
            </div>
        </Col>
    }}
</Draggable>

[dil-dpatra]

Try using Draggable tag as below

<Draggable draggableId="pickDrag" index={0} >
    {provided => {
        var transform = provided.draggableProps.style.transform
        if(transform){
            var t = transform.split(",")[1]
            provided.draggableProps.style.transform = "translate(0px," + t
        }
        return <Col>
            <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                VERTICAL
            </div>
        </Col>
    }}
</Draggable>

It worked but how to block the vertical movement after reaching to a particular position ?

[LeiSurrre]

Try using Draggable tag as below

<Draggable draggableId="pickDrag" index={0} >
    {provided => {
        var transform = provided.draggableProps.style.transform
        if(transform){
            var t = transform.split(",")[1]
            provided.draggableProps.style.transform = "translate(0px," + t
        }
        return <Col>
            <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                VERTICAL
            </div>
        </Col>
    }}
</Draggable>

This works on a regular draggable/droppable components, but I applied the same thing to a virtulized list (virtuosoo) it no longer works :(

Any potential solution from the package level instead of applying the transfor css hack?

e.g. I tried adding the code in the sandbox in the doc and it crashes the code https://codesandbox.io/s/react-virutoso-with-react-beautiful-dnd-e6vmq

[ozgrozer]

This is for horizontal lists.

<Draggable key={index} index={index} draggableId={draggableId}>
  {(provided, snapshot) => {
    const transform = provided.draggableProps.style.transform
    if (transform) {
      const t = transform.split(',')[0]
      provided.draggableProps.style.transform = t + ', 0px)'
    }

    return (
      <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        style={{ ...provided.draggableProps.style }}
      >
        item
      </div>
    )
  }}
</Draggable>