动态修改捕捉值答案

【问题标题】：Dynamic modification of snapping values动态修改捕捉值
【发布时间】：2020-04-15 20:46:27
【问题描述】：

我从 interract.js 开始，并尝试弄清楚如何将我的元素对齐到索引目标中定义的大小。当我静态设置值时效果很好，但实际上我想动态化这些值，以便每个元素可以相互对齐。我在文档中没有找到如何做到这一点，您是否有一个研究轨道允许我根据块的位移使值演变，以便它们变得“可捕捉”？

理想情况下，我认为这些值应该能够在每次移动元素时动态更改，因此使用dragend 事件，但是如何使值的更改生效... 感谢您的反馈。

// here I define my static values for the snap
var dynamicRestrictions = [
        {x: 200, range: 20},
        {x: 400, range: 20},
        {y: 300, range: 20}
    ];

interact('.resize-drag')
    .draggable({
        inertia: true,
        modifiers: [
            interact.modifiers.snap({
                targets: dynamicRestrictions, // <= how to dynamic edit them ?
                relativePoints: [
                    {x: 0, y: 0},
                    {x: 1, y: 1},
                    {x: 0, y: 1},
                    {x: 1, y: 0},
                ],
                offset: 'parent'
            }),
            ],
            autoScroll: true,
            listeners: {              
                move: dragMoveListener,
            }
        })

【问题讨论】：

标签： javascript haskell-snap-framework interact.js

【解决方案1】：

您可以在onstart 事件上使用函数。

.draggable({
    //...
    onstart: dragMoveStartListener,
    //...
})

这将允许您设置挂起值。

function dragMoveStartListener(event) {
    var element = $(event.target);
    dynamicRestrictions.length = 0;
    $('.resize-drag').each(function () {
        if (!$(this).is(element)) {
            var thisPosition = $(this).position(),
                snapX = thisPosition.left,
                snapY = thisPosition.top,
                snapWidth = $(this).width(),
                snapHeight = $(this).height(),
                range = 20;
            var sumWidth = parseInt(snapX + snapWidth),
                sumHeight = parseInt(snapY + snapHeight);
            dynamicRestrictions.push({x: snapX, y: snapY, range: 10});
            dynamicRestrictions.push({x: snapX, range: range});
            dynamicRestrictions.push({x: sumWidth, range: range});
            dynamicRestrictions.push({y: snapY, range: range});
            dynamicRestrictions.push({y: sumHeight, range: range});                      
        }
    });
}

我测试了它，它工作得很好，除了我不知道如何垂直和水平捕捉，每次都是一个或另一个...... 多找一点，应该做的工作

【讨论】：