js与引导线交互答案

【问题标题】：interact js with guide linejs与引导线交互
【发布时间】：2019-11-11 13:05:58
【问题描述】：

Interact.js 有一个 snap 选项来捕捉元素。但我不知道如何展示这些指导方针。我在想当捕捉发生时可能会触发一些事件，我可能会使用它们来显示这些行，但我在文档中没有找到它们。

【问题讨论】：

【解决方案1】：

interact 不支持开箱即用的这些准则，但您可以相对轻松地自己构建它们。

我built this 小提琴来展示这个过程。

重要的是：

interact(element)
    .draggable({
        snap: {
            targets: [
                function (x, y) {
                    var newX = Math.round(x / 50) * 50;
                    var newY = Math.round(y / 50) * 50;
                    someFunction(newX, newY);
                    return {
                        x: newX,
                        y: newY
                    };
            }],

如您所见，您可以构建函数来确定与当前鼠标位置相关的捕捉位置 (newX and newY)。在此函数中，您还可以调用另一个函数。在这种情况下，如果对象在这个位置，我调用了一个函数来显示一条线。在这里你可以发挥创意。您可以将一个行元素的位置设置为当前位置，您可以设置一些预定义的行并计算最接近的仅显示那一个，这取决于您的业务问题。

有关交互-捕捉的更多信息，请查看here in the docs

【讨论】：