Geek Answers Handbook

Can jquery UI draggable be "positional" from other elements?

I am implementing jquery UI draggable and has 2 of these draggable objects that you see on the linked page. They are, of course, draggable, so I can move them as needed.

How would I inform them of each other, so that I could try to align them or show alignment marks when, when dragging, they get to the same x or y as other draggable ones?

+4
source share
2 answers

Sounds like a fun problem.

I think that I would set a common reference point and measure their distance from each other, using this point for triangulation.

For instance. You can use the top left of the page as a breakpoint ... let elementa and elementb be the divs you are comparing. getDistance () function {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 while dragging, you can either use the wrapper: http://jsbin.com/etako/edit

or write a position like: $ (this) .data ('draggable'). offset.click.top - = x

+4
source

Good question.

First you need to create a list of the following data for each dragged file:

  • Position X
  • Y position
  • Height
  • Width

When defining objects as draggable objects, you can bind the callback to the drag event. This event fires when the dragged item moves 1 pixel. The value of this callback will be called a lot, so it is the key to keep the calculations minimal.

When the callback is called, you will be supplied with ui and event objects. The ui object will contain valuable positioning data X and Y on draggee.

With the size and location of the drag and other draggable objects, you can easily calculate the proximity to your siblings and act accordingly. With the available data, you can implement akellehe math.

Before I forget, you will have to recount the list of positions on the drag-and-drop stop event.

Edit: Check out the following draggable link for documentation on draggable events, methods, and values.

+3
source

More articles:


All Articles