Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.11.2014, 15:42
Интересующийся
Отправить личное сообщение для makarow.dmitry Посмотреть профиль Найти все сообщения от makarow.dmitry
 
Регистрация: 11.01.2014
Сообщений: 15

Как при .draggable() записывать top left в процентах
Добрый день!

Спасибо, большое за карту!
Интерактивная карта

Я применяю к меткам .draggable() и он перезаписывает left и top в пикселях.

Как сделать, чтобы в процентах?

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 07.11.2014, 15:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как узнать какие скрипты выполнились при щелчке на кнопке? Михал Общие вопросы Javascript 0 29.06.2014 20:16
Как избежать полосы прокрутки при анимации Bizon4ik Общие вопросы Javascript 4 21.06.2014 13:51
Свойство transition или как переместить div c точки А в точку Б? free_style Общие вопросы Javascript 0 19.06.2014 17:01
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как задать изменение src при прокрутке chandler Элементы интерфейса 3 12.01.2012 01:23