drag-n-drop

[maya]

I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-...ag-n-drop.html

each div containing an image has an id, and each image has a name, as in

<div id="h" style="position :absolute;left: 100;top:350;">
<img src=http://javascript.inte rnet.com/img/cards/hearts.gif name="h">
</div>

but I don't see where he references these id's and names in the JS code..

functions are declared with param 'e', but I don't see this param being
passed to the functions when they're called (called thus:
document.onmous edown = MD;.. etc..)

I need to apply this to a div (which contains a table), but if I put the
same id and name to my <divas he has here for one of the images it
doesn't work..

what am I missing please.. thank you..

[maya]

maya wrote:

I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-...ag-n-drop.html

each div containing an image has an id, and each image has a name, as in

<div id="h" style="position :absolute;left: 100;top:350;">
<img src=http://javascript.inte rnet.com/img/cards/hearts.gif name="h">
</div>

but I don't see where he references these id's and names in the JS code..

functions are declared with param 'e', but I don't see this param being
passed to the functions when they're called (called thus:
document.onmous edown = MD;.. etc..)

I need to apply this to a div (which contains a table), but if I put the
same id and name to my <divas he has here for one of the images it
doesn't work..

what am I missing please.. thank you..

ok, I got it to work for my table, but only if I drag from edges of
table, not inside table.. is there a way to do this?

thanks again..

[bobzimuta]

maya wrote:

I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-...ag-n-drop.html

That script is not very good. Doesn't even work in Firefox. Instead,
check these out:
http://www.dhtmlgoodies.com/index.html?page=dragDrop
http://www.walterzorn.com/dragdrop/dragdrop_e.htm

[cwdjrxyz]

maya wrote:

I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-...ag-n-drop.html

each div containing an image has an id, and each image has a name, as in

<div id="h" style="position :absolute;left: 100;top:350;">
<img src=http://javascript.inte rnet.com/img/cards/hearts.gif name="h">
</div>

but I don't see where he references these id's and names in the JS code..

functions are declared with param 'e', but I don't see this param being
passed to the functions when they're called (called thus:
document.onmous edown = MD;.. etc..)

I need to apply this to a div (which contains a table), but if I put the
same id and name to my <divas he has here for one of the images it
doesn't work..

The script you use is very old and likely comes from the browser war
era. It is not likely to work on some modern browsers.

Lasse Reichstein Nielsen who often posts here gave a good modern drag
script here about 2 years ago, and works on all of the modern browsers
on which I have tested it. You could likely find his post with a search
at Goggle. However, to save time, you might look at two of my pages at
http://cwdjr.net/test/newDrag.html and
http://www.cwdjr.net/test/picturePuzzle.html . You will see how the
script will work to drag images, text, and a division that contains 3
images.

[cwdjrxyz]

cwdjrxyz wrote:

You could likely find his post with a search
at Goggle. However, to save time, you might look at two of my pages at
http://cwdjr.net/test/newDrag.html and
http://www.cwdjr.net/test/picturePuzzle.html . You will see how the
script will work to drag images, text, and a division that contains 3
images.

These pages are written in xhtml 1.1 strict, but are only being server
as html. I have never gotten around to doing this, but you should have
no problem even if you serve your page as html 4.01 transitional. The
script will work fine and validate up to xhtml 1.1 without having to
use CDATA tags or using an external script.

[maya]

cwdjrxyz wrote:

cwdjrxyz wrote:

>You could likely find his post with a search
at Goggle. However, to save time, you might look at two of my pages at
http://cwdjr.net/test/newDrag.html and
http://www.cwdjr.net/test/picturePuzzle.html . You will see how the
script will work to drag images, text, and a division that contains 3
images.

These pages are written in xhtml 1.1 strict, but are only being server
as html. I have never gotten around to doing this, but you should have
no problem even if you serve your page as html 4.01 transitional. The
script will work fine and validate up to xhtml 1.1 without having to
use CDATA tags or using an external script.

thank you all very much!!

[maya]

cwdjrxyz wrote:

maya wrote:

>I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-...ag-n-drop.html

each div containing an image has an id, and each image has a name, as in

<div id="h" style="position :absolute;left: 100;top:350;">
<img src=http://javascript.inte rnet.com/img/cards/hearts.gif name="h">
</div>

but I don't see where he references these id's and names in the JS code..

functions are declared with param 'e', but I don't see this param being
passed to the functions when they're called (called thus:
document.onmou sedown = MD;.. etc..)

I need to apply this to a div (which contains a table), but if I put the
same id and name to my <divas he has here for one of the images it
doesn't work..

The script you use is very old and likely comes from the browser war
era. It is not likely to work on some modern browsers.

Lasse Reichstein Nielsen who often posts here gave a good modern drag
script here about 2 years ago, and works on all of the modern browsers
on which I have tested it. You could likely find his post with a search
at Goggle. However, to save time, you might look at two of my pages at
http://cwdjr.net/test/newDrag.html and
http://www.cwdjr.net/test/picturePuzzle.html . You will see how the
script will work to drag images, text, and a division that contains 3
images.

thank you all again for your help, I'm still struggling with this one..

I checked out all links posted by respondents..

this one, http://cwdjr.net/test/newDrag.html, I found to be closest to
what I need, except for one little thing: when I first click on div to
move it, it jumps to the bottom of the page (sometimes way to the
bottom, far away from bottom of pg content, so that i have to scroll
down to get it..) this happens only the first time I click on div after
opening it.. (the div's 'visibility' css-property is set to 'hidden'
when pg opens, it's opened by user.. don't know if this makes a
difference..)

would appreciate some suggestions...

thank you very much...

[cwdjrxyz]

maya wrote:

this one, http://cwdjr.net/test/newDrag.html, I found to be closest to
what I need, except for one little thing: when I first click on div to
move it, it jumps to the bottom of the page (sometimes way to the
bottom, far away from bottom of pg content, so that i have to scroll
down to get it..) this happens only the first time I click on div after
opening it.. (the div's 'visibility' css-property is set to 'hidden'
when pg opens, it's opened by user.. don't know if this makes a
difference..)

would appreciate some suggestions...

First, are you talking about the original URL you quote with only the
change of starting with visibility:hidd en for the division, or are you
talking about a very different page you made based on this?

If you are talking about the original, please tell us what browser and
OS you are using. The original works without "jumping" on divisions for
all recent browsers I have tested it with on Windows XP with all
updates, but I have not tested for a hidden division.

If you are talking about a page you made yourself, it will be difficult
to help you unless you can post a page that shows the problem, or at
least post the code that gives the problem, here. There likely are many
things that could cause your problem. Just for starters, make your
division visible and see if there is a problem. If this cures the
problem, you might then be able to cure your problem by using a visible
division with only one tiny thing such as a 1 px period in a paragraph
in it that is visible, and a picture or whatever you want hidden within
the division in another paragraph with a style associated with it so
you can make the paragraph hidden. It might go something like:

<div>
<p style="font-size:1px">.</p>
<p style="visibili ty:hidden"><img src="url" alt="whatever"> </p>
</div>

Or you could make the visible period the same color as the background.
If your background is white, then you would use.

<p style="color:#f fffff">.</p>

If I have a bit of free time soon, I might play with the original a bit
to see what happens with a hidden division.

[maya]

cwdjrxyz wrote:

maya wrote:

>this one, http://cwdjr.net/test/newDrag.html, I found to be closest to
what I need, except for one little thing: when I first click on div to
move it, it jumps to the bottom of the page (sometimes way to the
bottom, far away from bottom of pg content, so that i have to scroll
down to get it..) this happens only the first time I click on div after
opening it.. (the div's 'visibility' css-property is set to 'hidden'
when pg opens, it's opened by user.. don't know if this makes a
difference.. )

would appreciate some suggestions...

First, are you talking about the original URL you quote with only the
change of starting with visibility:hidd en for the division, or are you
talking about a very different page you made based on this?

If you are talking about the original, please tell us what browser and
OS you are using. The original works without "jumping" on divisions for
all recent browsers I have tested it with on Windows XP with all
updates, but I have not tested for a hidden division.

If you are talking about a page you made yourself, it will be difficult
to help you unless you can post a page that shows the problem, or at
least post the code that gives the problem, here.

thank you very much for yr help.. I have posted pg here..
http://www.francesdelrio.com/dd/kt-90dd2.html

I thought problem might be related to the fact that div to be dragged is
positioned absolutely (since in the drag-n-drop function he has this
line, how = how || "relative"; ..) so I tried positioning it relatively
(http://www.francesdelrio.com/dd/kt-90dd2a.html) but same problem.. (but
I do need the div to be positioned absolutely because I need it to be
positioned above all other elements on the page (and as I understand it
z-Index property works only for absolutely-positioned divs..) once div
is open, if you drag it to the right, it has to fall above the
nav-buttons..)

I made link that opens div red so you can spot it more easily..

thank you very much...

[cwdjrxyz]

maya wrote:

thank you very much for yr help.. I have posted pg here..
http://www.francesdelrio.com/dd/kt-90dd2.html

I thought problem might be related to the fact that div to be dragged is
positioned absolutely (since in the drag-n-drop function he has this
line, how = how || "relative"; ..) so I tried positioning it relatively
(http://www.francesdelrio.com/dd/kt-90dd2a.html) but same problem.. (but
I do need the div to be positioned absolutely because I need it to be
positioned above all other elements on the page (and as I understand it
z-Index property works only for absolutely-positioned divs..) once div
is open, if you drag it to the right, it has to fall above the
nav-buttons..)

I made link that opens div red so you can spot it more easily..

OK, I now see what is happening. My guess is that perhaps an onclick
action that opens the table for view is interacting in some strange way
with the onmousedown used for drag-and-drop for the division that
contains the table. Once the table appears and you click on it, it
jumps to the lower part of the page. But after that the drag-and-drop
works properly and you can move the table all over the page. I have not
been able to trace down the reason for this strange affair yet.
Hopefully the "Iron Scriptor", whoever that may be, will make an
appearance and explain to us what is going on :-).

I was able to do something else that might meet your needs, at least
until you can find out more about the above problem. I have a demo at
http://www.cwdjr.net/test/dragProblem.html . I have made comments where
changes are made. The demo page is very messy, because I did not link
to most of your images, etc.I made no attempt to check the bulk of your
code not related to the problem at hand. What I did was associate
onmouseover and onmouseoff with the red link that controls the table,
and I used control of visibility. If this is of any use to you, you may
want to reposition the table or red link a bit so the table does not
cover part of the link. IE6 seems to have a bit of a problem if you
move the cursor over the part of the red link that is covered by the
table, but it works normally just as for Firefox and Opera when you
move the cursor over the part of the red link not covered by the table.