如何防止元素接触/碰撞jointjs？

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);
        }
    }
});