offsetX, offsetY compatibility

[Twey]

Is there a more cross-browser alternative to offsetX/offsetY on the event object? I've been doing things like pageX minus the element's offsetLeft, but this doesn't account for things like margins.

Page in question: http://www.twey.co.uk/files/drag.html

[jscheuer1]

event.pageX is the spot where the mouse is and has nothing to do with where the target or srcElement are. Generally, when dragging, you avoid what I think you are talking about by taking the inline style position of the element and adding or subtracting to/from it the amount of mouse travel during the drag operation.

[Twey]

event.pageX is the spot where the mouse is and has nothing to do with where the target or srcElement are.

Thus the subtraction of the position of the element.

Generally, when dragging, you avoid what I think you are talking about by taking the inline style position of the element and adding or subtracting to/from it the amount of mouse travel during the drag operation.

But how would I then perform the drop operation? There is, as far as I know, no way to allow an event to pass through an object.

[jscheuer1]

how would I then perform the drop operation?

document.onmouseup=function(){
stop whatever it was that you were doing;
}

[Twey]

But it's not just a question of stopping the drag, an event also needs to be dispatched to the drop target.

[jscheuer1]

I worked on this sort of thing quite some time back. I used DD's dom_drag.js of the time as a jumping off point. Hopefully it (my previous work) will be of interest to you. I managed to get an element out of the normal flow of the page, drag it as an absolutely positioned item and then drop it back into the normal flow of the page. If I remember right, it wasn't perfect, but very good. Here's a link to the basic stuff:

http://home.comcast.net/~jscheuer1/s...om_drag_h2.htm

I'm not getting you though. If you stop dragging, you have dropped, what else is there to do?

[Twey]

Drag the "drag me" <div> in my sample page over the "drop me" <div>. You'll see the drop target change colour. The difficulty in this is about deciding which drop target has received the drop. I'm currently doing this by checking to see if the coordinates of the mouse when the drop event occurs are inside the bounding boxes of any drop targets. I can't just have the mouseup event caught by the drop target directly, since the drag element is always under the mouse when that occurs.

[jscheuer1]

Well, things jump around on your demo. To stop that (see my demo) I left behind an empty replacement for the dragged element. I think I checked to see if the left and top edges of the dragged were in the 'drop zones' and if so, I put the element in that element, otherwise I left it (I think absolutely positioned) in the body.

In another variation that I can point you to, I used the top and left coords of the dragged against the top and left coords of the drop zone. I had previously configured the drop zone coords (absolutely) though, so I knew where it was. Even so, in Opera and FF, no padding or margin allowed on the body.

[Twey]

Well, things jump around on your demo. To stop that (see my demo) I left behind an empty replacement for the dragged element.

I'm not too bothered about that jumping, but I am about the jumping that occurs when selecting the element. If you remove the margins you can see what I mean.

Thanks anyway, I will think about how your idea can be implemented.

[jscheuer1]

I'm curious, is there any real point to this, or is it just an exercise? Anyways, I was thinking - you can get the dragged element from the event and the drop zone element from the document tree. All required information about either can be gotten from the element itself once it has been acquired by the code. If there are, as you seem to be indicating, discrepancies due to style that cannot be gotten from the element's objects, these must be given to the script as variables. I haven't (at least not as I recall) had any trouble using offsetLeft, offsetTop (though these need to be traced up the document tree sometimes) and offsetWidth and offsetHeight.