jQuery draggable - как получить доступ к координатам

Как вы можете получить доступ к динамически меняющимся координатам перетаскиваемого объекта? Мне не нужны координаты только stop, но постоянный поток информации о местоположении.jQuery draggable - как получить доступ к координатам

Другими словами, если я перетащить object A вокруг, я должен быть в состоянии получить object B перемещаться параллельно (1) наблюдения изменений в object A, а затем (2) применять их к положению object B.

В этом коде я хочу, чтобы красный блок (obj2) перемещался синим (obj1).

<html> 
<head> 
<style> 
#obj1 { 
    position:fixed; 
    top:50px; 
    left:50px; 
    width: 40px; 
    height: 40px; 
    background-color: blue; 
} 
#obj2 { 
    position:fixed; 
    top:150px; 
    left:150px; 
    width: 40px; 
    height: 40px; 
    background-color: red; 
} 
</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(function() { 
     $('#obj1').draggable(); 
    }) 
</script> 
</head> 

<body> 
    <div id="obj1"></div> 
    <div id="obj2"></div> 
</body> 
</html>

источник

2012-06-16 Nick

Спасибо всем :) – Nick

Вы можете использовать drag событие перетаскиваемым:

$("#obj1").draggable({ 
    drag: function(event, ui) { 
     var pos = ui.position; 
     $("#obj2").css({ 
      left: pos.left + 100, 
      top: pos.top + 100 
     }); 
    } 
});

DEMO:http://jsfiddle.net/kPEfL/

источник

2012-06-16 07:57:08 VisioN

Плагин с возможностью перетаскивания имеет 3 события: запуск, перетаскивание и остановка (все из которых обеспечивают координаты). Вы можете привязать событие перетаскивания и получить в своем обратном вызове необходимую вам информацию.

Here вы можете найти пример и демонстрационную версию.

источник

2012-06-16 07:54:35

свойства событий offsetY и offsetY подходят для этой цели, вы можете прикрепить drag обработчик за ними:

$('#obj1').bind('drag', function(event) { 
    console.log(event.offsetY); // dymamic y position 
    console.log(event.offsetX); // dymamic x position 
});

R правочник:

the Draggable demos page

источник

2012-06-16 08:04:16

jQuery draggable - как получить доступ к координатам

ответ

Смежные вопросы