Question

I’m implementing jquery UI draggable and have 2 of these draggables that you see on the linked page. They’re of course draggable, so I can move them around as needed.

How would I make them aware of each other though, so that I could try to make them align or show alignment marks when while being dragged, they get to the same x or y as another draggable?

Answer 1

Sounds like a fun problem.

I think I would set a common reference point and measure their distance from each other by using that point to triangulate.

For example. You can use the top left of the page as a reference point…
let elementa and elementb be the divs you’re comparing.
function getDistance(){
var aPos = $(“#elementa”).offset();
var bPos = $(“#elementb”).offset();

// distance of a to b:
//y = (y2-y1)
//x = (x2-x1)
var xa = aPos.left;
var xb = bPos.left;

var ya = aPos.top;
var yb = bPos.top;

//vector from point a to b:
x = xa-xb;
y = ya-yb;

// length of the vector (distance from div a to b)
return Math.sqrt(x*x + y*y);

}

if you want to get the position during drag you can either use a wrapper:
http://jsbin.com/etako/edit

or log the position like:
$(this).data(‘draggable’).offset.click.top -= x