如何在react-beautiful-dnd中限制元素的可拖动区域

Question

澄清一下，我的意思并不是定义一个可放置区域，我的意思是使其在视觉上无法将项目拖动到特定范围之外。例如，如果您有一个包含一堆较小元素的 div，并且您当前正在使用react-beautiful-dnd 将它们拖放到父 div 中，即使当您放开它们时它们只会弹回，您可以仍然在视觉上将元素拖动到 div 之外——这就是我想避免的。

我取得了一些进步。我希望我的列表项只能上下拖动，修改下面的变换样式属性确实完美地解决了这个问题：

<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>

但是，如果我添加另一行理论上也应该约束 y 轴（以便元素保持在

<ul/>

父级的边界内），则会失败：

...
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)`;
...

问题是，虽然这在技术上可以阻止您拖动的

<li/>

元素被转换出界，但就拖动逻辑而言，它实际上并没有停止其位置，这使得其他元素变得怪异出来了。

我保证我会先尝试自己去寻找其他人，但我在这件事上束手无策。

Answer 1

为了锁定水平边框（区域），我们使用了下一种方法

<Draggable
    key={id}
    draggableId={id}
    index={index}>
{(providedDrag) => (
  const transform =
    providedDrag.draggableProps?.style?.transform;
  if (transform) {
    const t = transform.split(',')[1];
    // eslint-disable-next-line no-param-reassign
    providedDrag.draggableProps.style.transform = `translate(0px,${t}`;
  }
  <div
    ref={providedDrag.innerRef}
    /* eslint-disable-next-line react/jsx-props-no-spreading */
    {...providedDrag.draggableProps}
    /* eslint-disable-next-line react/jsx-props-no-spreading */
    {...providedDrag.dragHandleProps}
    key={ticketLevel.id}>
    <div>...</div>
  </div>
<Draggable/>

要锁定垂直区域 - 需要通过 Ref Dropable 框大小获取并与道具进行比较，然后覆盖

transform