与引导线交互js

Question

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

Answer 1

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

我built thisfiddle展示过程

重要的部分是：

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

与引导线交互js

interact js with guide line

javascript

interact.js