问：

我想要实现的目标：

当可拖动元素位于可拖放对象上时，我想知道我的鼠标距离该可拖放对象的中心/上边框/下边框有多远。例如：如果 DRAGGABLE 与 DROPPABLE 中心的接近度介于 0.5 和 1 之间，则使 DRAGGABLE CHILD，否则如果指针更靠近上角/下角，则在该可拖放（可排序）项之前/之后添加可拖动。

我的目标是获得 Notion 提供的体验：

靠近中心，然后嵌套文件。否则，请在 GIF 之前或之后对我想要的内容进行排序

我试过什么：

我玩了可排序树的例子，并试图理解实现。该示例定义了基于 offsetLeft value/ indentationWidth 的子项。

function handleDragMove({ delta, over, collisions, activatorEvent }: DragMoveEvent) {
    console.log("delta", delta.x, delta.y); //position of mouse from drag start point
    over && over.rect && console.log("over.rect", over.rect);
    // position of element that pointer is over of (relative to entire screen)
}

所以我想使用 clientX、clientY 值而不是 delta 来与 over.rect 值进行比较并计算与中心的接近度。但是我能想到的任何事情都感觉很笨拙，并且在滚动时会出现其他错误等等。

reactjs next.js 树拖放 jquery-ui-sortable

function handleDragMove({ over, active }: DragMoveEvent) {
    let draggableCenterY;
    if (active.rect.current.translated) {
        draggableCenterY = active.rect.current.translated?.top + active.rect.current.translated?.height / 2;
    }
    let overCenterY;
    if(over){
        overCenterY = over.rect.top + over.rect.height / 2;
    }

    console.log('draggableCenterY: ', draggableCenterY)
    console.log('overCenterY', overCenterY)
}

上一个：如何在可排序的jQuery中使用jQuery删除特定图像

下一个：如何自定义streamlit制作的动态表？

如何获取 Draggable 元素相对于 isOver 的 Droppable 的位置？在可排序中也是如此

how to get position of Draggable element relative to Droppable that isOver? in Sortable too

我想要实现的目标：

我的目标是获得 Notion 提供的体验：

我试过什么：

评论