Как отследить координаты Draggable элемента?

@Vingshet · Регистрация: 31.08.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте! Ну собственно весь вопрос поместился в заголовок. Как отследить координаты перемещаемого с помощью Draggable окна?

@Soldado · 02.09.2013, 20:50

ui.position – объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента.
здесь

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Координаты</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <meta name="keywords" content="Draggable,jQuery, перетаскивание">
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script type="text/javascript">
$(function() {
    $('.block1').draggable({
        drag: function(event,ui) {
            
         $('#info').html(ui.offset.top+";"+ui.offset.left);}
    });
    
});
</script>
<style>
.ui-draggable{
border:1px solid #0a6804;
background-color:#5aef93;
width:150px;
height:150px;
}
#info{
border:1px solid #b36a09;
background-color:#ffff00;
width:500px;
height:20px;
 
}
 
 
</style>
</head>
 
<body style="margin:200px 0 0 200px">
<div class="block1" style=";"></div>
<div id="info"></div>
</body>
</html>

@djason · 08.03.2017, 22:03

А как узнать позицию .block1, если он нахродиться в другом блоке например #block который меньше самого экрана и находиться по середине, то такой метод возвращает позицию блока .block1 относительно экрана не с нуля а например left: 300, если поставить как в примере то результат undifined, а нужно узнать именно позицию .block1 относительно родителя?

Javascript

$('.block1').draggable({
      drag: function(event,ui) {
      console.log($('.block1').offset.top); //undefined
      $('#info').html($('.block1').offset.top+";"+$('.block1').offset.left);}
});

@Vingshet 0 / 0 / 0 Регистрация: 31.08.2013 Сообщений: 3
		1
	Как отследить координаты Draggable элемента? 02.09.2013, 11:55. Показов 5516. Ответов 2 Метки нет (Все метки) Здравствуйте! Ну собственно весь вопрос поместился в заголовок. Как отследить координаты перемещаемого с помощью Draggable окна? 0

	08.03.2017, 22:03

Как отследить координаты Draggable элемента?

Решение