入力の要素位置を追跡して表示する方法は？

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;"> 

私はそれらをドラッグ可能にするために、このコードを使用：

<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> 

要素が一つだけのクラス名を持っている場合には、動作します。もし "draggable color fill"のようなクラスがあれば、それは動作しません。

複数のクラス名を使用するにはどうすればいいですか？ご協力ありがとうございます。

Answer 1

基本的にoffsetHeightプロパティとoffsetWidthプロパティを使用できます。

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