Best way to implement drag and drop for a DIV?

  • Follow


I am implementing a "windowing" library that uses DIVs to simulate windows.

It works, but tracking of the mouse pointer is poor.  In other words, as long as
I move the mouse slowly, the 'window' will track the pointer and drag
accordingly, BUT if you move the pointer quickly, it stops where it is while the
pointer goes off on its own.  Oddly, it seems to be OK left and right movement,
but up and down trips it up.

I am using onmousemove/up/down etc event capture for the window DIV itself, and
tracking the cursor that way.  Perhaps instead I should be capturing the
document's onmousemove/up/down events, determine if the cursor is on my window,
and move the window that way?  If so, what is the best way to determine that the
object under the cursor is a window I want to move....should I set some global
status var on the DIV's onmouseover event to indicate location (title bar,
window resize handle, etc)?


0
Reply Billy 8/25/2003 9:47:09 PM

Take a look at the work done over here:

http://www.dhtmlcentral.com/

He has div based "windows", and if you look up "dhtml library" under the
Projects menu you can see the code for a drag and drop implementation.

HTH
Gabe

"Billy" <none@none.com> wrote in message
news:mg0lkvoostajc91o4o56qpbnkk1c5koh46@4ax.com...
> I am implementing a "windowing" library that uses DIVs to simulate
windows.
>
> It works, but tracking of the mouse pointer is poor.  In other words, as
long as
> I move the mouse slowly, the 'window' will track the pointer and drag
> accordingly, BUT if you move the pointer quickly, it stops where it is
while the
> pointer goes off on its own.  Oddly, it seems to be OK left and right
movement,
> but up and down trips it up.
>
> I am using onmousemove/up/down etc event capture for the window DIV
itself, and
> tracking the cursor that way.  Perhaps instead I should be capturing the
> document's onmousemove/up/down events, determine if the cursor is on my
window,
> and move the window that way?  If so, what is the best way to determine
that the
> object under the cursor is a window I want to move....should I set some
global
> status var on the DIV's onmouseover event to indicate location (title bar,
> window resize handle, etc)?
>
>


0
Reply spazzwig 8/25/2003 10:11:18 PM


Billy <none@none.com> writes:

> I am implementing a "windowing" library that uses DIVs to simulate windows.
> 
> It works, but tracking of the mouse pointer is poor. In other words,
> as long as I move the mouse slowly, the 'window' will track the
> pointer and drag accordingly, BUT if you move the pointer quickly,
> it stops where it is while the pointer goes off on its own. Oddly,
> it seems to be OK left and right movement, but up and down trips it
> up.

After reading this far, my guess is that your "onmousemove" handler is
placed on the element being moved. When you move the mouse fast
enough, you move off the element, and the mousemove event no longer
reaches the element.

> I am using onmousemove/up/down etc event capture for the window DIV
> itself, and tracking the cursor that way. Perhaps instead I should
> be capturing the document's onmousemove/up/down events, 

Just the mousemove and mouseup. I think the safest is for the mousedown
to trigger "moving mode" where only mousemove and mouseup are recognized
at all, and they are handled on the document (or window) level.

> the cursor is on my window, and move the window that way? If so,
> what is the best way to determine that the object under the cursor
> is a window I want to move

The event has a property. In standard compliant browsers, it is
"target", in IE it is "srcElement". I usually write my handlers as:

 function (event) {
   event = event || window.event; // IE sucks
   var tgt = event.target || event.srcElement; // IE sucks
   ...
 }

/L
-- 
Lasse Reichstein Nielsen  -  lrn@hotpop.com
 Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
  'Faith without judgement merely degrades the spirit divine.'
0
Reply Lasse 8/25/2003 10:52:29 PM

2 Replies
261 Views

(page loaded in 0.048 seconds)

Similiar Articles:













7/23/2012 4:59:06 AM


Reply: