Javascript-форум - Как при .draggable() записывать top left в процентах

makarow.dmitry,
окончание перетаскивания параметр stop -- перезапишите данные в нужном вам формате

макет внизу -- кликнуть на картинку - навести на красную точку курсор - прочитать тултип - перетащить точку - посмотреть тултип -- растянуть картинку - красная точка должна сохранить пропорционально своё положение -- читать документацию или http://javascript.ru/forum/job/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>resizable demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

  <style>
  body{
    background: #DEB887
  }

  #resizable{
    width:550px;
    height:330px;
    margin: 0% auto;
  }

  #resizable img{
    width:100%;
    height:100%;
  }

  .positionDiv{
    padding:2px 4px;
    opacity:0.6;
    background-color:#FFFFFF;
    position:absolute;
    z-index:100;
    color:#000000;
  }
  .circle {
    position:absolute;
    width: 2%;
    height: 2%;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="resizable">
<img src="http://savepic.net/6201412.jpg" alt=""></div>
<script>
var table = [{
    left: "40%",
    top: "61%",
    text: "Солнышко"
}, {
    left: "60%",
    top: "81%",
    text: "Кораблик"
}];
$.each(table, function(indx, el) {
    var div = $("<div/>", {
        "class": "positionDiv",
        "css": {
            "left": el.left,
            "top": el.top
        },
        "text": el.text
    }).prependTo("#resizable")
});

$("#resizable").resizable({
    handles: " e, s, se",
    aspectRatio: true
});
$("#resizable").click(function(ev) {
    var div = $("<div/>", {
        "class": "circle",
        "title": "circle"
    })
    div.prependTo(this).position({
        my: "left top",
        of: ev,
        offset: "3 -3",
        collision: "fit"
    });
    var pos = div.position(),
        h = $(this).height(),
        w = $(this).width(),
        left = Math.round(pos.left * 100 / w) + "%",
        top = Math.round(pos.top * 100 / h) + "%";
    div.draggable({
        containment: $("#resizable"),
        stop: function(event, ui) {
            var pos = ui.position,
                h = $("#resizable").height(),
                w = $("#resizable").width(),
                left = Math.round(pos.left * 100 / w) + "%",
                top = Math.round(pos.top * 100 / h) + "%";
            div.tooltip({
                content: left + top
            });
            div.css({
                "left": left,
                "top": top,
                height: w / h * 2 + "%"
            })
        }
    });

    div.css({
        "left": left,
        "top": top,
        height: w / h * 2 + "%"
    })
    div.tooltip({
        content: left + top
    });
})
</script>
</body>
</html>