To clarify, I don’t mean defining a droppable area, I mean making it so that visually, you literally can’t drag items outside of a certain range. For example, if you have a div that houses a bunch of smaller elements and you’re currently using react-beautiful-dnd to drag and drop them within the parent div, even though they’ll just snap back when you let go you can still visually drag the elements outside of the div–that’s what I’d like to avoid.

I made some progress. I want my list items to only be dragged up and down, and modifying the transform style property below did fix that perfectly:

<Draggable key={id} draggableId={id.toString()} index={i}>
    {(provided, snapshot) => {
        var t = provided.draggableProps.style.transform;
        if (t) {
            let y = parseInt(t.split(',')[1].slice(0, -3));
            provided.draggableProps.style.transform = `translate(0px,${y}px)`;
        }

        return (
            <li ref={provided.innerRef} {...provided.draggableProps}>
                <MyCustomElement>
            </li>
        )
    }}
</Draggable>

However, if I add in another line that should theoretically also constrain the y-axis (so that the elements stay within the bounds of the <ul/> parent), is fails:

...
let y = parseInt(t.split(',')[1].slice(0, -3));
y = Math.min(Math.max(y, -(i*60)), 240-(i*60));    // 240 -> container height, 60 -> element height
provided.draggableProps.style.transform = `translate(0px,${y}px)`;
...

The problem is that while this technically does the job of stopping the <li/> element you’re dragging from being transformed out of bounds, it’s not actually stopping its position as far as the dragging logic is concerned, which makes the other elements freak out.

I promise I tried to look everyone else first on my own for this, but I’m at my wits end on this one.