如何獲得div的座標？

我正在使用下面的代碼來獲取放置元素的位置。我將這個位置保存到數據庫中，以便下次用戶打開頁面時，這些元素處於相同的位置。它到目前爲止工作得很好，但是當屏幕尺寸發生變化時，位置發生了變化。例如，如果我使用大型桌面屏幕，捕獲圖像位置，將其保存到數據庫並在筆記本電腦上打開相同的頁面[小屏幕韌體]，位置各不相同。如何獲得div的座標？

我想這是因爲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; 
       }

調試器如果（ui.helper.attr（ 'ID'）。搜索（/阻力[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 


    });

謝謝，

來源

2011-02-28 Vani

並不確切地知道你的代碼是如何工作的，但我認爲這將這樣的伎倆：

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

來源

2011-02-28 19:25:35 TimFoolery

$（ui.helper）.offsetLeft給出 '未定義' 請見我entore代碼以上 – Vani 2011-02-28 19:36:39

offsetLeft是一個有效的元素方法（[MDN aritcle]（https://developer.mozilla.org/en/DOM /element.offsetLeft）。）如果它不工作，它必須是因爲ui.helper爲空。 – TimFoolery 2011-02-28 19:45:03

$（ui.helper）。不是null，只有$（ui.helper）.offsetLeft是'undefined'，我沒有看到任何語法。 – Vani 2011-02-28 19:49:52

的offset方法可以讓你相對於文檔的位置，所以你可能希望position方法來代替，這給你相對偏移父位置：

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

在你的代碼不使用pos變量可言，這也是這是行不通的原因。

saveCoords(pos.left, pos.top, angle, ui.helper.attr('id') + counter);

來源

2011-02-28 19:34:57 Guffa

ui.absolutePosition.left和代碼建議結果相同左/頂請參閱上面的我的完整代碼 – Vani 2011-02-28 19:38:34

如何獲得div的座標？

回答

相關問題