Email conversation
| From | Tommy Svensson |
|---|
| To | Me |
|---|
| Subject | Extending the dragable layer to also be a drop zone |
|---|
| Date | 14 November 2006 13:00 |
|---|
Hi Mark,
I'm using your fabulously well written dragableLayer script. Now, I need to
be able to generate an event once my layer is "dropped on top" of another
dragable layer.
The reason for this, is that I have generated dragable layers which all
represent pages of a book. Now I need to resort the pages by drag and drop.
For instance, when the mouse pointer of my dragged layer (X) is within the
left and right borders of another dragable layer (Y), i would like Y to move
gracefully to the original position of X. When the mouse cursor of my X is
outside the left and right borders of Y's original position, then Y should
restore its position. See what I mean?
I would really appreciate any pointers on how to move towards this goal. I'm
a systems engineer so it's ok to talk tech.
/T
| From | Me |
|---|
| To | Tommy Svensson |
|---|
| Subject | Re: Extending the dragable layer to also be a drop zone |
|---|
| Date | 15 November 2006 17:17 |
|---|
Tommy,
> Now, I need to
> be able to generate an event once my layer is "dropped on top" of another
> dragable layer.
The script itself is not really designed for this, so you would need to make
quite a few additions yourself.
The dragIsMove function is responsible for managing movement and dropping.
This is the section that runs only on drop so you will need to add your code
in there:
if( e.type && e.type.toLowerCase() == 'mouseup' ) {
The position of the layer is available in newX and newY. The layer itself is
available as window.storeLayer. You can use window.storeLayer.offsetHeight
and window.storeLayer.offsetWidth to get the dimensions of it, so its
coordinates are:
x1 = newX
y1 = newY
x2 = newX+window.storeLayer.offsetWidth
y2 = newY+window.storeLayer.offsetHeight
I suggest you store those values (and a reference to the layer) for every
layer in an array, then whenever one is dropped, loop through the array, and
check against those values to see if you have an overlap.
The formula to check for overlaps is:
dropped_x1 < target_x2 && dropped_x2 > target_x1 &&
dropped_y1 < target_y2 && dropped_y2 > target_y1
You can then move the layers as needed, using
layerobject.style.left = 53 + ( document.childNodes ? 'px' : 0 );
layerobject.style.top = 17 + ( document.childNodes ? 'px' : 0 );
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/