捕捉值的动态修改

Question

我从 interract.js 开始，尝试找出如何将我的元素对齐到索引目标中定义的大小。当我静态设置值时效果很好，但实际上我想动态化这些值，以便每个元素都可以相互对齐。我没有在文档中找到如何执行此操作，您是否有一个研究轨道允许我根据块的位移使值演变，以便它们变成 "snappable" ？

理想情况下，我认为每次移动元素时这些值都应该能够动态更改，因此使用 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,
            }
        })

Answer 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});                      
        }
    });
}

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

捕捉值的动态修改

Dynamic modification of snapping values

javascript

haskell-snap-framework

interact.js