js与引导线交互

Question

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

Answer 1

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

我构建了这个小提琴来展示这个过程。

重要的部分是：

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正如您所看到的，您可以构建一个函数来确定相对于当前鼠标位置的捕捉位置 ( )。在这个函数中你还可以调用另一个函数。在本例中，如果对象位于该位置，我调用了一个函数来显示一行。在这里你可以发挥创意。您可以将一行元素的位置设置为当前位置，您可以设置一些预定义的行并计算哪一条最接近仅显示该行，这取决于您的业务问题。

有关交互 - 捕捉的更多信息，请查看此处的文档