JSFiddle - React, Tailwind, and code Playground

by kirito0709

JavaScript

function move(element, fromLeft, fromTop, toLeft, toTop, stepFromLeft, stepFromTop, delay) {

    var positionLeft = parseInt(element.style.left, 10);
    var positionTop = parseInt(element.style.top, 10);
    positionLeft = isNaN(positionLeft) ? fromLeft : positionLeft;
    positionTop = isNaN(positionTop) ? fromTop : positionTop;
    if (positionLeft >= toLeft) {
        positionLeft = "stop";
    } else {
        positionLeft += stepFromLeft;
    }
    if (positionTop <= toTop) {
        positionTop = "stop";
    } else {
        positionTop += stepFromTop;
    }
    if(positionLeft != "stop"){element.style.left = positionLeft + "px";}
    if(positionTop != "stop"){element.style.top = positionTop + "px";}
    setTimeout(function () {
        move(element, fromLeft, fromTop, toLeft, toTop, stepFromLeft, stepFromTop, delay);
    }, delay)

}
/* походу вычисление координат элемента нужно передать в функцию выше, если хотим  динамически изменять высоту и ширину???
o = object = конкретный товар
c = cart = корзина
oh = height = высота конкретного товара
ow = width = ширина конкретного товара
cp = cart position = координаты корзины
op = object position = координаты конкретного товара
*/
    var objects, o, c, oh, ow, cp, op;
    objects = $('.item_wrap');

    o = objects['0'];
    oh = $(o).height();
    ow = $(o).width();
    op = o.getBoundingClientRect();
    console.log('op.top ='+op.top);
    c = $('.cart .fa-shopping-bag');
    cp = c[0].getBoundingClientRect();
    console.log('cp.top ='+cp.top);


    $(o).parent().height(oh + 30);
    $(o).css({"position":"absolute", "z-index":"99999", "background":"#fff", "width":ow});
    //console.log(pos);
    var el = o;
    var fromLeft = 15;
    var fromTop = -1;
    var toLeft = Math.abs(cp.left - op.left);
    console.log(toLeft);
    var toTop = cp.top - op.top;
    console.log('toTop = '+toTop);
    var stepFromLeft = 3;
    var stepFromTop = -1;
    var delay1 = 10;
    move(el, fromLeft, fromTop, toLeft, toTop,...