[Measure centre point of draggable]

Thanks, that worked. Although the extra element is inconvenient.

 

I said I'd post my example in the morning, but I spent the week refactoring.

 

Here's what I got using the "X/Ypercent: -50" technique:

 

See the Pen YNWewV by MichaelMC (@MichaelMC) on CodePen

[Measure centre point of draggable]

i created a draggable bar which divides two windows. i grab a percent value for the the bar and in turn the ratio for the two windows. so when the bar is dragged to 70% of the container width, the left/top window is 70% and the bottom/right window is 30%. problem is that the bar position is measured from the left, and when the draggable reaches the far edgeod the bounds, its position is less than 100 due to the width.

 

i can fix this with some pixel hacking. but it gets very inelegant and hsrd to debug as the page is going to have multiple nested instances of this sliding window model.

 

i want to create the draggable s$ that it works like a cross-fader, thick handle, precise positioning, overlapping the bounds by half its width. Importantly, the bounds are not a fixed size.

 

I will provide an example in the morning.

[Move Draggable to closest non-overlapping position on positive hit]

I have set up 2 draggable objects and would like to ensure that they do not overlap. How can I move the dragged element to the nearest available position?

 

PS: Also notice the blue box does not want to go to left:0; when it starts at left:20%;

See the Pen zogpeb by anon (@anon) on CodePen