JQuery Масштабирование элемента в зависимости от его положения при перетаскивании - PullRequest
Новая
       36

JQuery Масштабирование элемента в зависимости от его положения при перетаскивании

0 голосов
/ 04 марта 2020

Я пытаюсь масштабировать div, основываясь на его позиции Y, в то время как он перетаскивается.

Так, например, когда его позиция Y увеличивается, его масштаб становится пропорционально меньше, как будто он удаляется от вас. И когда его позиция Y уменьшается, его масштаб пропорционально увеличивается, как если бы он был ближе к вам.

Пока я кодировал это ниже, но это не работает вообще: 

<div id="dragThis"></div>

$('#dragThis').draggable(
    {
        containment: $('body'),
        drag: function(e){

            var elheight = $(this).height();
            if(lastPos == -1) {
                lastPos = e.pageY;    
                return false;
            }else if(lastPos > e.pageY){
                var inheight = (elheight - (e.pageY/100)) + "px";
                console.log(lastPos, e.pageY);
                $(this).animate({
                    height: inheight,
                    width: inheight
                });
                console.log("Y increases", inheight);
            }else if(lastPos < e.pageY){
                var deheight = (elheight + (e.pageY/100)) + "px";
                console.log(lastPos, e.pageY);
                $(this).animate({
                    height: deheight,
                    width: deheight
                });
                console.log("Y decreases", deheight);
            }
            lastPos = e.pageY;
        },
        revert: 'true'
    });

#dragThis {
    width: 80px;
    height: 80px;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 1em;
    background-color: #ff0000;
    cursor: move;
}

Происходят две вещи: анимация не применяется одновременно с событием перетаскивания (имеется задержка), и масштабирование не прекращается, изменяя его значение бесконечно, даже после окончания перетаскивания. .

Как мне достичь желаемого эффекта?

...