drag-n-drop

[maya]

I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-details/drag-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.internet.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.onmousedown = 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 <div> as he has here for one of the images it
doesn't work..

what am I missing please.. thank you..

 

[maya]

I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-details/drag-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.internet.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.onmousedown = 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 <div> as 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]

I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-details/drag-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]

I need a drag-n-drop script.. I have found one here..
http://javascript.internet.com/page-details/drag-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.internet.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.onmousedown = 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 <div> as 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]

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]

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]

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]

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:hidden 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="visibility: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:#ffffff">.</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]

First, are you talking about the original URL you quote with only the
change of starting with visibility:hidden 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]

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.

 

[maya]

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.

thank you very much for all your help, cwdjrxyz (also I realized after I
posted this on Sunday that you are the author of the script I've been
working with, sorry....

ok, actually what you did is not really what I need.. (sorry..... )

what I need: div is hidden when pg loads, user opens div, clicks on it
and drags, puts it wherever they want on pg, then closes it... I went
from you example and worked from there, little by little, until I
realized the problem is the CSS-positioning of the div (whether
positioned absolutely or relatively..)

pls look at www.francesdelrio.com/dd/dd.html, you will see that the only
one that is not a problem is the one that is not positioned with CSS,
the ones that are positioned (whether absolutely or relatively) have a
problem.. what to do??? oh brother.. again, many thanks..

 

[cwdjrxyz]

pls look at www.francesdelrio.com/dd/dd.html, you will see that the only
one that is not a problem is the one that is not positioned with CSS,
the ones that are positioned (whether absolutely or relatively) have a
problem.. what to do??? oh brother.. again, many thanks..

Your test script makes the problem much more easy to see, and the fact
that there is only a problem for absolute and relative positioned
divisions should hold some clue. I will continue to consider this
problem if I get any new ideas, as time premits. Also, with much more
compact code that more precisely illustrates the problem, perhaps
others will now consider looking at it. Some regulars of this group do
not seem to be around just now - perhaps on vacation. If this thread is
kept active, perhaps others will see it in time.

 

[cwdjrxyz]

Your test script makes the problem much more easy to see, and the fact
that there is only a problem for absolute and relative positioned
divisions should hold some clue. I will continue to consider this
problem if I get any new ideas, as time premits. Also, with much more
compact code that more precisely illustrates the problem, perhaps
others will now consider looking at it. Some regulars of this group do
not seem to be around just now - perhaps on vacation. If this thread is
kept active, perhaps others will see it in time.

I may have the solution for your problem at
http://www.cwdjr.net/test/dragTest.html . It seems to work on IE6,
Firefox, and Netscape. I got it to validate as html 4.01 transitional
at the w3c. Anything higher would require extensive revision of some of
the code. Note that a blue background color had to be removed from the
CSS for your absolute and relative divisions. If you do not do this,
the table drags with the normal blue background used by you, but a blue
blank division background remains where the table was before you drag
it.

 

[maya]

I may have the solution for your problem at
http://www.cwdjr.net/test/dragTest.html . It seems to work on IE6,
Firefox, and Netscape. I got it to validate as html 4.01 transitional
at the w3c. Anything higher would require extensive revision of some of
the code. Note that a blue background color had to be removed from the
CSS for your absolute and relative divisions. If you do not do this,
the table drags with the normal blue background used by you, but a blue
blank division background remains where the table was before you drag
it.

oh my gosh, this is great!! thank you so much!!

I also tried this one, which is very complex (about 1300 lines of JS
code...
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
it works fine with absolutely-positioned divs, but I can't get the
'move' cursor to show up on the div..
http://www.francesdelrio.com/dd/wz.html

again, many many thanks....

 

[maya]

I may have the solution for your problem at
http://www.cwdjr.net/test/dragTest.html . It seems to work on IE6,
Firefox, and Netscape. I got it to validate as html 4.01 transitional
at the w3c. Anything higher would require extensive revision of some of
the code. Note that a blue background color had to be removed from the
CSS for your absolute and relative divisions. If you do not do this,
the table drags with the normal blue background used by you, but a blue
blank division background remains where the table was before you drag
it.

I just realized what you did (because I couldn't find any differences in
the dragImg() function..) you put this line inside div:

<p onMouseDown="return dragImg(this,event)">

instead of calling drag function in <div> tag...

interesting.. I wonder why this makes a difference... again, many thanks..