与指南线交互js

Question

Interact.js具有捕捉元素的捕捉选项。但我不知道如何展示这些指南。我正在考虑在发生捕捉时可能会发生一些事件，我可能会用它们来显示这些行，但我没有在文档中找到它们。

Answer 1

互动并不支持开箱即用的指南，但您可以为自己构建相对简单的指南。

我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）。 在此功能中，您还可以调用另一个功能。在这种情况下，如果对象位于此位置，我调用一个函数来显示一行。在这里你可以发挥创意。您可以将一行Element的位置设置为当前位置，您可以设置一些预定义的行并计算哪一行最接近只显示一行，这取决于您的业务问题。

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