如何跟蹤和顯示輸入中的元素位置？

Question

我有我的網頁上有的拖着元素：

<h1 id="text1" class="drag" style="top:446.5px; left: 590.5px;">Title</h1> 
<img id="img1" src="" data-resize="true" data-src="" class="drag" style="top:446.5px; left: 590.5px;"> 

我用這個代碼，以使他們dragable：

<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 
var positions = JSON.parse(localStorage.positions || "{}"); 
$(function() { 
    var d = $("[class=draggable]").attr("class", function (i) { 
     return "draggable_" + i 
    }) 
    $.each(positions, function (id, pos) { 
     $("#" + id).css(pos) 
    }) 

    d.draggable({ 
     scroll: false, 
     stop: function (event, ui) { 
      positions[this.id] = ui.position 
      localStorage.positions = JSON.stringify(positions) 
     } 
    }); 
}); 
</script> 

它的工作原理，當元素只有一個類名。如果有像「可拖動的顏色填充」這樣的類，它不起作用。

如何讓使用乘法類名稱成爲可能？謝謝你的幫助。

Answer 1

基本上可以使用offsetHeight和offsetWidth屬性。

https://www.w3schools.com/jsref/prop_element_offsetheight.asp