ways to drag & drop

[wolverine]

Hi Friends,
I want to know what all ways in which drag & drop can
be accomplished in javascript. I googled and saw 2

1) using ondrag & ondrop events
2) using onmousedown, onmousemove and onmouseup events.
I
I have a doubt here. I initially thought like it is necessary to have
mousedown, mousemove and mouseup to be attached to same element for
doing drag & drop. I saw a link which gave an example which had
mousedown and mousemove attached to source(dragged) element and
onmouseup attached to document element.

http://www.webreference.com/programming/javascript/mk/column2/

Could any one give me some idea about the various combinations of
attaching these events to source element, target element or document
element and still accomplishing drag & drop.

Thanks in Advance,
Kiran.

 

[Joost Diepenmaat]

Hi Friends,
I want to know what all ways in which drag & drop can
be accomplished in javascript. I googled and saw 2

1) using ondrag & ondrop events

Those appear to be IE only events.

2) using onmousedown, onmousemove and onmouseup events.
I
I have a doubt here. I initially thought like it is necessary to have
mousedown, mousemove and mouseup to be attached to same element for
doing drag & drop. I saw a link which gave an example which had
mousedown and mousemove attached to source(dragged) element and
onmouseup attached to document element.

You can attach the event handlers to any object as long as that object
will recieve the event. That means you can attach then to the document,
the draggable object, and object in between or a mixture of those.

In practice, you want the mousemove and mouseup handlers attached to the
document and not the dragging element, because if the user moves the
mouse quickly, chances are he'll move *off* the element.


Joost.

 

[wolverine]

Those appear to be IE only events.


You can attach the event handlers to any object as long as that object
will recieve the event. That means you can attach then to the document,
the draggable object, and object in between or a mixture of those.

In practice, you want the mousemove and mouseup handlers attached to the
document and not the dragging element, because if the user moves the
mouse quickly, chances are he'll move *off* the element.

Joost.

Thanks a lot for reply. I want to know 1 more thing. My aim is to
detect drag & drop events
happening inside a browser. For this i inject js code into web browser
and parse the dom and look
for mousedown/move/up events attached to elements. In case a mousedown/
move/up is seen, i will attach my own function to the corresponding
event of that element using attachEvent. This will help me detect the
mousedown event which is the starting point of drag & drop.

Now comes the issue. I want to know whether a drop has "really"
happened. Some times user might
drag the element and drop it at an incorrect location resulting in
element going back to initial
position. To be clear that on seeing mouseup, i cannot be sure that a
drop has happened. Is there
any way to detect a correct drop?

 

[Joost Diepenmaat]

Thanks a lot for reply. I want to know 1 more thing. My aim is to
detect drag & drop events
happening inside a browser.

For this i inject js code into web browser
and parse the dom and look
for mousedown/move/up events attached to elements. In case a mousedown/
move/up is seen, i will attach my own function to the corresponding
event of that element using attachEvent. This will help me detect the
mousedown event which is the starting point of drag & drop.

Now comes the issue. I want to know whether a drop has "really"
happened. Some times user might
drag the element and drop it at an incorrect location resulting in
element going back to initial
position. To be clear that on seeing mouseup, i cannot be sure that a
drop has happened. Is there
any way to detect a correct drop?

Which browsers implement drag & drop like that? The only d&d actions I
know of are dragging of URLs / images / text *off* the page onto the
desktop or another app, or dragging of urls / files *onto* a browser
window (which generally loads that url or file). Neither of these work
anything like what you're describing.

What you're describing sounds like something that's been implemented
in javascript. Which means that the best way to detect a "correct" drop
is to add your code to the existing D&D code.

 

[wolverine]

Which browsers implement drag & drop like that? The only d&d actions I
know of are dragging of URLs / images / text *off* the page onto the
desktop or another app, or dragging of urls / files *onto* a browser
window (which generally loads that url or file). Neither of these work
anything like what you're describing.

Probably http://www.webreference.com/programming/javascript/mk/column2/
would give you an idea of what drag & drop i am referring to.

What you're describing sounds like something that's been implemented
in javascript. Which means that the best way to detect a "correct" drop
is to add your code to the existing D&D code.

I cannot add my code to existing D&D code since that is
developed by some web developer who i have no contact with. Only thing
i do is to attach js code to the head element when html page is opened
in browser and parse the dom and wait for D&D events.

 

[Joost Diepenmaat]

Probably http://www.webreference.com/programming/javascript/mk/column2/
would give you an idea of what drag & drop i am referring to.

So it's a piece of javascript.

I cannot add my code to existing D&D code since that is
developed by some web developer who i have no contact with. Only thing
i do is to attach js code to the head element when html page is opened
in browser and parse the dom and wait for D&D events.

That would mean you're just re-implementing most of whatever you think the
existing code does.

It's probably easier and more reliable to insert your stuff in the
existing framework rather than second-guess it. Even if you're not
touching the existing code, you may be able to override the behaviour
enough to do that.

For instance, in the URL above, the only thing that you have to do is to
replace document.onmouseup with something like:

documment.onmouseup = function() {
if (curTarget) {
// sucessful drop
}
else {
// not a successful drop
}
// call original handler
mouseUp();
};

 

[Gregor Kofler]

wolverine meinte:

Now comes the issue. I want to know whether a drop has "really"
happened. Some times user might
drag the element and drop it at an incorrect location resulting in
element going back to initial
position. To be clear that on seeing mouseup, i cannot be sure that a
drop has happened. Is there
any way to detect a correct drop?

Hard to understand what you mean, but I suppose you're looking for
something I've implemented here

http://web.gregorkofler.com/index.php?page=dragdrop

It's pretty basic stuff: whenever a drop occurs I check the mouse
position against boundaries of "drop areas" and if the drop is not
possible, I return the dragged element to it's origin (which was stored
when picked up).

Gregor

 

[wolverine]

wolverine meinte:


Hard to understand what you mean, but I suppose you're looking for
something I've implemented here

http://web.gregorkofler.com/index.php?page=dragdrop

It's pretty basic stuff: whenever a drop occurs I check the mouse
position against boundaries of "drop areas" and if the drop is not
possible, I return the dragged element to it's origin (which was stored
when picked up).

Gregor

Thanks for trying to answer my doubt. But let me make my question
clear. I am injecting a javascript (using COM) into html page which is
being viewed by a user in a web browser. The aim is here is to
understand whenever a user does a drag & drop. I will parse the dom
and attach my own event handlers to onmousedown/move/up events so that
i understand all the drag & drop events happening inside web browser.

I have no idea about the "drop areas". Only the guy who developed the
page knows about them.
I don't have any control over how he creates the web page. Nor do i
have any contact with them.

What i know here is a combination of mouseup/move/down is a drag&
drop. What i want to know is whether the drop happened actually. To be
clear, whether the dragged component went back to it's original
position or is dropped into target.