JSFiddle - React, Tailwind, and code Playground

by Zkolya_linkoln

HTML

<button id="btn2">new div</button>

<br/>
<div id="container"></div>
<div id="c">Позиции</div>

CSS

.resize {
    background-color: #29e;
    color: white;
    font-size: 20px;
    font-family: sans-serif;
    border-radius: 8px;
    position : fixed;
    
   
    
}
#container {
    box-shadow: 4px 0px 18px -1px #0000ff;
    width: 700px;
    height: 500px;
    position: relative;
 overflow-y: scroll;
       overflow-x: hidden;*/
      }  
     ::-webkit-scrollbar {
    width: 10px;
    height: 25px;
   margin:150px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
.selected {
    border:1px dotted black;
    /*box-shadow:0px 0px 10px rgba(0,0,0,0.5);*/
}

JavaScript

$(document).ready(function () {
    
 

    
    
    var dname_id = 1;
    $("#btn2").click(function () {

        var dynDiv = $('<div>')
            .attr('id', 'div_' + dname_id++)
            .css({
            'width': '50px',
                'height': '20px'
        })
            .addClass('resize')
            .html(dname_id - 1);

        $('#container').append(dynDiv);
        //-------------------------------------------------------//
       dynDiv.resizable({
            
        });
        dynDiv.draggable({
            containment: 'parent'
        });

        dynDiv.click(function () {

            var hi = $("#container").height();
            var wi = $("#container").width();
            var imagposit = $(this).position();
            var ll = 100 * imagposit.left / wi;
            var tt = 100 * imagposit.top / hi;
            alert("left " + ll + "  top " + tt);
            
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
          

        });


    });
    var main = $('#container'),
    bw = parseInt(main.css('border-left-width'), 10),
    mT = main.offset().top + bw,
    mL = main.offset().left + bw;

    width_container = parseInt($("#container").width(), 10);
    height_container = parseInt($("#container").height(), 10);
    $("#c").click(function(){
        
    var allCoords = $('.resize', main).map(function () {
            return getCoords(this);
        }).get().join(''); 
        alert(allCoords)
        
    })
function getCoords(el) {
        var $that = $(el),
        pos = $that.offset(),
        posTop = pos.top - mT,
        posLeft = pos.left - mL;

        posLeft_percent = 100 * posLeft / width_container;
        posTop_percent = 100 * posTop / height_container;
       
    var pos = "#" + el.id + '{top: ' + posTop_percent + '%; left: ' + posLeft_percent + '%;}';
        return pos;
    }    

    

 
});