如何在 jointjs 中防止来自 touching/colliding 的元素？

Question

我正在使用 jointjs 创建一个交互式流程图应用程序，有没有办法防止元素被拖动到另一个元素之上？

Answer 1

当用户完成拖动并发现重叠时，您可以恢复元素的位置。

paper.on({
    'element:pointerdown': (elementView, evt) => {
        // store the position before the user starts dragging
        evt.data = { startPosition: elementView.model.position() };
    },
    'element:pointerup': (elementView, evt) => {
        const { model: element } = elementView;
        const { model: graph } = paper;
        const elementsUnder = graph.findModelsInArea(element.getBBox()).filter(el => el !== element);
        if (elementsUnder.length > 0) {
            // an overlap found, revert the position
            const { x, y } = evt.data.startPosition;
            element.position(x, y);
        }
    }
});

如何在 jointjs 中防止来自 touching/colliding 的元素？

How can I prevent elements from touching/colliding in jointjs?

javascript

jointjs