JSFiddle - React, Tailwind, and code Playground

by ruslanchek

HTML

<div id="planshet"></div>
<input type="button" value="Сброс" id="clear" />
<input type="button" value="Поехали" id="start" />

CSS

#planshet {
    width: 400px;
    height: 400px;
    border: 1px black solid;
    cursor: default;
    position: relative;
}
.point {
    font-size: 1px;
    height: 1px;
    width: 1px;
    position: absolute;
    background: blue;
    cursor: default;
}

JavaScript

$(function () {
    $("#planshet")
        .bind("selectstart", function () {
        return false;
            
    }).bind("mousedown", function () {
        window._mousedown = true;
            
    }).bind("mousemove", function (e) {
        if (window._mousedown) {
            $(this).append(getPoint(e.offsetX, e.offsetY))
        }
    });
    
    $(document.body)
        .bind("mouseup", function () {
        window._mousedown = false;
    });
    
    $('#clear').on('click', function(){
        reset();
    });
    
    $('#start').on('click', function(){
        movie();
    });
})

function getPoint(_left, _top) {
    return $("<div class=point />").css({
        "left": _left,
            "top": _top
    });
}

function reset() {
    $(".point").remove();
}

function movie(i) {
    if (i == null) {
        window.targets = $(".point");
        movie(0);
    } else {
        $(window.targets.get(i)).css({
            width: "5px",
            height: "5px"
        });
        $(window.targets.get(i - 1)).css({
            width: "1px",
            height: "1px"
        });
        if (window.targets.get(i)) setTimeout(function(){
            movie(i + 1);
        }, 10);
    }
}