Как получить координаты div? - PullRequest
Новая
       1

Как получить координаты div?

0 голосов
/ 28 февраля 2011

Я использую приведенный ниже код, чтобы получить позицию упавших элементов. Я сохраняю позицию в базе данных, чтобы при следующем открытии страницы пользователем элементы находились в той же позиции. Пока он работает нормально, но когда размер экрана меняет положение, меняются. Например, если я использую большой экран рабочего стола, запишите положение изображения, сохраните его в базе данных и откройте ту же страницу на ноутбуке [небольшой экранный справочник], позиции различны.

Полагаю, это потому, что JQuery получает положение элементов относительно страницы, а не моего контейнера "div". Итак, как получить положение элементов в div. 

 $(document).ready(function() {
      //Counter
      counter = 0;
      //Make element draggable
      $("#fd img").draggable({
          helper: 'clone',
          containment: '#frame',
          //When first dragged
          stop: function(ev, ui) {

              var pos = $(ui.helper).offset();
              objName = "#clonediv" + counter
              $(objName).css({ "left": pos.left, "top": pos.top });
              $(objName).removeClass("drag");
              //When an existiung object is dragged

              var container = $('#frame');
              $(objName).draggable({
                  containment: container,
                  stop: function(ev, ui) {

                      var pos = $(ui.helper).offset();
                      //console.log($(this).attr("id"));
                      //console.log(pos.left)
                      //console.log(pos.top)
                  }
              });
          }
      });
      //Make element droppable
      $("#frame").droppable({

          drop: function(ev, ui) {

          var angle; 
              if (document.getElementById('angle').value != "") {
                  angle = document.getElementById('angle').value;
                  document.getElementById('angle').value = 0;
              }
              else {
                  angle = 0;
              }

отладчик if (ui.helper.attr ('id'). search (/ drag [0-9] /)! = -1) {

                  if (ui.helper.attr('id').indexOf("clonediv") != -1) {
                      var deleteimage = 0;
                      var id = ui.helper.attr('id').substring(8);
                      saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, angle, id, document.getElementById("trafficID").value, deleteimage);

                  }
                  else {
                      var pos = $(ui.helper).offset();
                      counter++;
                      var element = $(ui.helper).clone();
                      //var element = element1.resizable();

                      element.addClass("tempclass");
                      $(this).append(element);
                      var deleteimage = 0;
                      element.attr("id", ui.helper.attr('id') + counter);

                      **saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, angle, ui.helper.attr('id') + counter, document.getElementById("trafficID").value, deleteimage);**

                      $(".tempclass").attr("id", "clonediv" + ui.helper.attr('id') + counter);
                      $("#clonediv" + ui.helper.attr('id') + counter).removeClass("tempclass");

                      //$(".tempclass").attr("onclick",function(){ $(this).remove(););
                      //$("#clonediv" + counter).removeClass("tempclass");
                      //Get the dynamically item id

                      draggedNumber = ui.helper.attr('id').search(/drag([0-9])/);
                      itemDragged = "dragged" + RegExp.$1;

                      //console.log(itemDragged)
                      //alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);

                      $("#clonediv" + ui.helper.attr('id') + counter).addClass(itemDragged);
                  }



              }
          }
      });
      //Make the element resizable


  });

Спасибо

Ответы [ 2 ]

1 голос
/ 28 февраля 2011

Метод offset возвращает вам позицию относительно документа, поэтому вы, вероятно, хотите использовать метод position, который дает вам позицию относительно родительского смещения: 

var pos = $(ui.helper).position();

В вашем коде вы вообще не используете переменную pos, что также является причиной того, что она не работает. 

saveCoords(pos.left, pos.top, angle, ui.helper.attr('id') + counter);
0 голосов
/ 28 февраля 2011

Не знаю точно, как работает ваш код, но я думаю, что это поможет: 

saveCoords($(ui.helper).offsetLeft, $(ui.helper).offsetTop, angle, ui.helper.attr('id') + counter);
...