<p>I've implemented a set of draggable elements that can be dropped into some containers using jQuery. What I need is an animation that moves an element to a specific container without user interaction. The problem is that the elements and the drop containers are in completely <strong>different parts of the DOM</strong> and mostly positioned using float.</p>

<p>All I need is some code to get the absolute position difference between 2 floating DOM elements, preferrably using jQuery. The only thing I found were some hacks parsing upwards the DOM but always very browser-specific (e.g. "this does not work well with Firefox or IE or whatever").</p>

<p>Best would be something like this:</p>

<pre><code>var distance = getDistance(element1, element2);
</code></pre>

<p>or in jQuery notation:</p>

<pre><code>var distance = $(element1).distanceTo($(element2));
</code></pre>

I never used jQuery, just looked up API, so I can assume you can do the following:
```
var o1 = $(element1).offset();
var o2 = $(element2).offset();
var dx = o1.left - o2.left;
var dy = o1.top - o2.top;
var distance = Math.sqrt(dx * dx + dy * dy);
```