PositionCalculator Testing

Manually testing of PositionCalculator

Live Demo

Try out all the options check the result.

Configuration

Elements

idem: yellow box (100x100)
target:
boundary:

Placement

Initial placement of reference point.
The colored triangle shows your decision.

itemAt (-> red):
itemOffset (px|%):
targetAt (-> blue):
targetOffset (px|%):

Behavior

stick:
flip:

Showcase

Container

item
being positioned
target, drag me!
item follow me
(option 'target' -> "green box")

Live Results

Return value of .calculate(): 

            

            

              Properties, read form DOM:
              

                item top: 
              

              

                target top: 
              

              

                difference y: 
              

              

                item left: 
              

              

                target left: 
              

              

                difference x: