Dynami c модификация привязки значений - PullRequest
Новая
       20

Dynami c модификация привязки значений

2 голосов
/ 14 апреля 2020

Я начинаю с interract. js и пытаюсь выяснить, как привязать мои элементы к определенным размерам в целевых индексах. Это работает хорошо, когда я устанавливаю значения статически, но на самом деле я хотел бы динамизировать значения, чтобы каждый элемент мог привязываться друг к другу. Я не нашел, как это сделать в do c. Будет ли у вас исследовательский трек, позволяющий мне изменять значения в соответствии со смещением блоков, чтобы они стали «привязываемыми»?

в идеале я думаю, что эти значения должны быть в состоянии динамически изменяться при каждом перемещении элемента, поэтому используется событие 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,
            }
        })

1 Ответ

2 голосов
/ 15 апреля 2020

вы можете использовать функцию для события 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});                      
        }
    });
}

Я проверил это, и оно работает довольно ну, кроме того, что я не знаю, как защелкивать как по вертикали, так и по горизонтали, каждый раз, когда это одно или другое ... ищет немного больше, должен сделать работу

...