JSFiddle - React, Tailwind, and code Playground

by ravan

CSS

body {
    background: url('http://www.sopassagemdeaviao.com/images/mapas/mapa-sao-paulo.jpg') no-repeat;   
}

.tag {
    position: absolute;
    border: 2px solid red;
}

JavaScript

var id = 0;

$(document).ready(
    function() {
        $(document).mousedown(start);
    }
);

function start(e) {
    var sx = e.pageX;
    var sy = e.pageY;
    

    $('body').append('<div id="m'+id+'" class="tag"></div>');
    el = $('#m' + id);    
        
    el.css({
        'top': sy+'px',
        'left': sx+'px',
        'width': 5+'px',
        'height': 5+'px'
    });

    $().mousemove(function(e) {
        alert('ok');
        
        var w;
        var h;
        
        var ox = e.pageX - sx;
        var oy = e.pageY - sy;
        
        if(ox > 0) {
            w = ox;
        } else {
            w = - ox;
            sx = sx + ox;
        }  
        
        if(oy > 0) {
            h = oy;
        } else {
            h = - oy;
            sy = sy + oy;
        }
        
        el.css({
            'top': sy+'px',
            'left': sx+'px',
            'width': w+'px',
            'height': h+'px'
        });

    });

    $().one('mouseup', function() {
        alert('ok');
        $().unbind();
        $(document).mousedown(start);
        ++id;
        //aqui deverão ser enviadas as infos via AJAX
    });

}