javascript - 与指导线互动

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

最佳答案

交互不支持这些准则，但是您可以自己构建它们。

我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