JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>
            Анимация квадрат
        </title>
    </head>
    <body id="body">
        <div id="container">
            <div id="small"></div>
            <div id="big"></div>
        </div>
    </body>
</html>

JavaScript

var box = function(D_elem, t, f){
    
    time = t/4;
    
    var D_small = D_elem.find('#small');
    var offsetX =0;
    var offsetY=0;
    var isMove = false;
    
    if(f){
        setInterval(function (){
            $("#small").animate({top:"-175px"}, time);
            $("#small").animate({left:"175px"}, time);
            $("#small").animate({top:"0px"}, time);
            $("#small").animate({left:"0px"}, time);
        },0);
    } else {
        setInterval(function (){
            $("#small").animate({left:"175px"}, time);
            $("#small").animate({top:"-175px"}, time);
            $("#small").animate({left:"0px"}, time);
            $("#small").animate({top:"0px"}, time);
        },0);
    }
    D_elem.on("mousedown", function(event){
        var coords= D_elem.offset();
 
        offsetX = event.pageX - coords.left;
        offsetY = event.pageY - coords.top;
        isMove = true;
    });
    $(window).on("mousemove", function(event){
        if(isMove){
            D_elem.css({
                left:   event.pageX - offsetX,
                top:    event.pageY - offsetY
            });
        } 
    });
    $(window).on("mouseup", function(event){
        isMove=false;
    });
};
 
$(function() {
    D_elem = $("#container");
    f = false;
    
    if(f=true){var right=f}
    else {var left=f};
    
    var boxes_new1 = new box(D_elem , 4000, right);
    var boxes_new2 = new box(D_elem , 6000, left);
});