I am writing a small web application in which one user can move an object around the screen, and another watch the movement of this object (coordinates are transmitted). But the problem is that users may have different window sizes. To fix this, I want to use the coordinates not in pixels but in percentages. That is, I divide the number hundred by the width of the window and get the coefficient by which I will multiply the coordinate horizontally. Also vertically. But the problem is that due to the size of the element with a different window size, the element will be in different places. How to make everything work as I want?
Here's what it looks like:
function fullscreen() { if (screenfull.enabled) { screenfull.toggle(); } } function pos(elem) { var offset = elem.offset(), eh = elem.height(), ew = elem.width(), wh = $(window).height(), ww = $(window).width(), ol = offset.left, ot = offset.top; //wh=720,ww=1280; $('#x').text(ol.toFixed(0)); $('#y').text(ot.toFixed(0)); //$('#ew').text(ew.toFixed(0)); //$('#eh').text(eh.toFixed(0)); $('#winY').text(wh); $('#winX').text(ww); $('#xp').text((ol / ww * 100).toFixed(4)); $('#yp').text((ot / wh * 100).toFixed(4)); } $(".elem").draggable({ drag: function() { pos($(this)); }, containment: "document" }); $(window).resize(function() { pos($('.elem')); }); $("#move").on('click', function() { move(50, 50); }); function move(x, y) { var elem = $('.elem'), offset = elem.offset(), eh = elem.height(), ew = elem.width(), wh = $(window).height(), ww = $(window).width(), ol = offset.left, ot = offset.top; elem.offset({ left: x / 100 * ww, top: y / 100 * wh }); pos($('.elem')); } pos($('.elem')); //console.log($(window).height()); .elem { width: 100px; height: 100px; background-color: rgba(0, 0, 0, 0.4); color: #FFF; overflow: hidden; position: absolute; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.0.2/screenfull.min.js"></script> <div><i>Координаты x в процентах: </i> <span id="xp"></span> </div> <div><i>Координаты y в процентах: </i> <span id="yp"></span> </div> <div> <button id="move">(50;50)</button> </div> <button onclick="fullscreen()">Fullscreen toggle</button> <div class="elem"> <div>x: <span id="x"></span>/<span id="winX"></span> </div> <div>y: <span id="y"></span>/<span id="winY"></span> </div> <!-- <div>width: <span id="ew"></span></div> <div>height: <span id="eh"></span></div> --> </div> 
