Topic awaiting preservation: Help Getting started moving DIV elements

Hello,

I've been searching for code to do the following:

On MouseOver of DIV element, Highlight the element (fill background color), then if user click on (within) this div element, move the DIV element with the cursor.

That seems easy, just not sure how to get started.

Karl

Take a look at this "crosshair" script:

http://dynamicdrive.com/dynamicindex13/crosshair.htm

Given that the mouse following routines are fairly cross-browser, that would be a good script to modify. I'm sure that getting a single DIV to follow the cursor (instead of 2 DIVs) would be a doddle... And making it so it only followed after a click would be a simple matter of toggling a "followState" (or whatever you want to call it) variable.

Hope this helps,
Dan

hm... that doesn't work in opera 7.5x.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

quote:

---

But don't copy paste shitty snippets from dynamicdrive

---

I don't see anything wrong with using the DD code as a starting point to build on/modify. I suggested it purely because of its cross-browser event handling, not because of the tidiness of the code ;o)

Dan

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

I like the beyondwonderland site - it's just a shame at 800x600 that you cannot view all of the text on any of the pages (no scrollbars are present on any page).

Dan

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

I need to know which DIV element I am hovering over...
Would like to create a single mouse click event for all DIVS and pass the *active* div to this event. Possibly, the event simply references a global object when the event is fired...

Karl

quote:

---

I need to know which DIV element I am hovering over...

---

You could keep track of this in a global variable, which gets set whenever the onmouseover event on a DIV fires.

If you don't fancy putting an "onmouseover" event on every DIV in code, you could either do it programatically (after page has loaded), or use behaviours (assuming you're OK with IE only).

Dan

Not a problem including "mouseover" event for each DIV.. I am building the pages using XSLT, so one update.

Hmmm... couldn't I just have a mouseclick event? Duhh, wouldn't I know which DIV fired off this event? Then all mousedown events could call a single DO_MY_MOVE_ROUTINE which would move the DIV.

I would still need to know which DIV element I am floating over while dragging -- I am going to create a SWAP_DIV routine, which basically swap "shift-down" existing DIV tags where the DIV being dragged is dropped.
These shifts will be restricted verticaly only shifts. So if I drag DIV "C" up and to the location of DIV "A", the new arrangment should be:

DIV "C"
DIV "A"
DIV "B"

[edit: woops fixed that order!]

Karl

(Edited by Karl on 07-20-2004 18:54)

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

For some example code of dragging DIVs around, check out my (non dynamic drive ) Tek-Tips FAQ here:

http://www.tek-tips.com/faqs.cfm?spid=216&sfid=5190

Unfortunately, it's IE only ATM, until I get around to updating it

Dan

This link might interest you:
http://cross-browser.com/x/examples/drag1.php
they seem to use an Javascript library(shrudders) but at least the divs could be dragged aroud in
firefox 0.8, MSIE 6 and opera. I am not very comfortable with javascript but this contain some usefull info.
Also take a look to this:
http://www.sitepoint.com/forums/showthread.php?t=179557

good luck

------------------------------
Support Justice for Pat Richard

(Edited by Rinswind 2th on 07-21-2004 00:47)