2014-02-20 4 views
0

У меня есть веб-сайт с перетаскиваемом изображения внутри DIV, код скрипта выглядит следующим образом:позиционирования перетаскивать изображения с позиции Javascript()

var offset = 0, 
     xPos = 0, 
     yPos = 0; 

$(document).ready(function(){ 
    $(".item").draggable({ 
     containment: '#house_wall1', 

     drag: function(){ 
      offset = $(this).position(); 
      xPos = offset.left; 
      yPos = offset.top; 
      $('#posX').text('x: ' + xPos); 
      $('#posY').text('y: ' + yPos); 
     }, 

     // Find original position of dragged image. 
     start: function(event, ui) { 
      // Show start dragged position of image. 
      var Startpos = $(this).position(); 
      $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top); 
     }, 

     // Find position where image is dropped. 
     stop: function(event, ui) { 
      // Show dropped position. 
      var Stoppos = $(this).position(); 
      $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); 
     } 
    }); 
}); 

Моя проблема заключается в том, что х и у значения определяются из край экрана, а не div, который они должны использовать. Поэтому, если у вас есть экран с более низким разрешением или если окно браузера меньше, то значения x и y будут отличаться от экрана с более низким разрешением.

Я разместил проблему, подобную этому ранее, и подумал, что она исправлена, но, к сожалению, это не так. Я слышал, что использование position() вместо offset() должно выполнить эту работу, но это все еще ничего не исправить. Может быть, это потому, что position() равен offset() в этом случае?

Заранее спасибо.

ответ

1

если вы хотите div как координаты координат для левого и верхнего. вы должны установить свойство стиля позиции. div position = "relative" или абсолютная позиция div

+0

lolz thanks dude! – user3287771

+0

добавление: если вы хотите сохранить div в текущей позиции и служить координатами, вы должны использовать «относительные» (и «абсолютные» для внутренних элементов). позиционирование как абсолютное, поместит div в (0, 0) WRT элемент DOM предка, который имеет другое нестатическое положение (которое может быть, в худшем случае, верхним углом документа) или (слева, сверху) WRT, этот элемент , если определена оппонент. –

0

Извините, я забыл упомянуть, что также свойства смещения относительно следующего родителя, у которого есть positon: относительный или абсолютный, если ни один из родителей не установил свойство position, начало координат для IE - это происхождение клиента, что делает mozilla для меня подозрительно, я надеюсь, что они изменили это вскоре до стандарта IE. вы можете увидеть разницу, поместив границу в document.body и установив элемент div в тело документа и предупредив о вызове (div.offsetLeft); IE и mozilla будут бросать разные значения. Mozilla показывает значение, которое включает только поле тела, но не границу, и если вы делаете document.body.offset в mozilla, оно показывает минус-значение ???? ..... которое равно 0 в IE

Исключением являются внутренние элементы таблицы, такие как td и tr, для них таблица является offsetParent

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