Walter Zorn's wz_dragdrop

[Joel Byrd]

I'm trying to accomplish the following: I want to set up generic
drag-drop functionality for dragging and dropping images. I want to be
able to drag various images into various drop targets, and when they
are dropped, they should call a function that I've defined.

I searched the internet for a tool that could accomplish my goal easily
and effectively, and I found 2. Yahoo! UI Library and Walter Zorn's
wz_dragdrop. At first, the Yahoo! UI Library looked great, but as I
proceeded to download it and try to implement it, I found it was not
idiot-proof - I had trouble implementing it, so I looked to Walter
Zorn's wz_dragdrop. The ease with which this tool implemented and the
incredible functionality offered by it was like magic. But now, I've
run into sort of a dead-end.

I've gotten as far as being able to drag images (so that the original
image stays put while a transparent copy is dragged) and when I drop
them, they float back to their original position. So, I've pretty much
got the whole "drag" part down, but I'm having trouble with the "drop"
part. One of the functions included in wz_dragdrop is called
"my_DropFunc()" - this is called any time a draggable object is
dropped, and within the function, you have access to a just about any
property of the dragged object, as well as some methods of the dragged
object - one in particular called "getEltBelow()", which gets the
element below the draggable object - and this would be perfect, because
once I've identified the object below the draggable object, I can
determine whether it is a drop target, and if so call some function to,
say, do some ajax, and then make the image disappear. The problem is
that the getEltBelow() function is not working cross-browser. It works
fine in IE and Firefox, but is way off in Opera.

An example of my code is located at:
http://web.njit.edu/~jmb2/Joel/temp.javascript_test.php

In IE and Firefox, if you drag one of the images over one of the
folders, and then drop it, an alert will display the id of the drop
target below the dragged image. In Opera, it's off - you'll notice,
for example, that if you drop an image over the folder "droppable_0",
it will think that the object below the dragged image is actually
"droppable_2".

I've tossed around the idea of starting from scratch with the Yahoo! UI
Library, since it would be more flexible, but wz_dragdrop offers so
much functionality that can be implemented so easily, and I'm so close
to getting this thing to work. I've looked on the web and seen almost
no one implementing drag *and* drop functionality with Walter Zorn's
script. If anyone has any ideas as to my problem, or can point me to
an exmple of implementing drag-drop with wz_dragdrop, let me know.

Joel

P.S. Another little bug I noticed is that in IE, _sometimes_ the copied
image loads much smaller than the original image, which has a negative
effect both visually and functionally.

 

[Joel Byrd]

ADDENDUM: I've actually traced the problem to Opera's method of
rendering images. The problem is that the positions of the drop
targets are being calculated before the images are rendered, so that
once the images are loaded, the *actual* positions of the drop targets
change (are pushed down by the images) while their *calculated*
positions remain the same (and are, therefore, off). So I am using
setInterval with a function that includes all the code for calculating
the position of the drop targets - and this is in an if statement that
checks to see whether all the images on the page have been loaded. In
other words, none of the drop target position code executes until all
the images on the page have been rendered. But, alas, I have another
problem. Within this code is included the main wz_dragdrop method,
which is SET_HTML(). The way it works is that you pass the names or
id's of the elements that you want to make draggable (or droppable),
separating them by commas. But I want this list of elements to be
dynamic, so I can't just call SET_HTML(elem1, elem2, elem3). I have to
create a list (comma-separated string) and pass it into the function
using eval (yes, I'm using eval - so shoot me).

Apparently, eval is having trouble being called inside a function -
does anyone know anything about this problem?

 

[RobG]

Joel Byrd said on 22/03/2006 1:58 PM AEST:

ADDENDUM: I've actually traced the problem to Opera's method of
rendering images. The problem is that the positions of the drop
targets are being calculated before the images are rendered, so that
once the images are loaded, the *actual* positions of the drop targets
change (are pushed down by the images) while their *calculated*
positions remain the same (and are, therefore, off). So I am using
setInterval with a function that includes all the code for calculating
the position of the drop targets - and this is in an if statement that
checks to see whether all the images on the page have been loaded. In
other words, none of the drop target position code executes until all
the images on the page have been rendered. But, alas, I have another
problem. Within this code is included the main wz_dragdrop method,
which is SET_HTML(). The way it works is that you pass the names or
id's of the elements that you want to make draggable (or droppable),
separating them by commas. But I want this list of elements to be
dynamic, so I can't just call SET_HTML(elem1, elem2, elem3). I have to
create a list (comma-separated string) and pass it into the function
using eval (yes, I'm using eval - so shoot me).

That doesn't justify using eval(). Why not keep the list of id's up to
date in an array (say called idArray) and use:

SET_HTML( idArray.join(',') );


join usea a comma by default as the separator, the above just makes it
explicit. You could probably safely use:

SET_HTML( idArray.join() );


You could also keep the ids in a string and concatenate them:

idString += ',' + someId;

but the array makes it easier to manage the separators and provides some
other management tools that might come in handy - length in particular.

Apparently, eval is having trouble being called inside a function -
does anyone know anything about this problem?

See my reply to your other thread.

 

[cwdjrxyz]

I'm trying to accomplish the following: I want to set up generic
drag-drop functionality for dragging and dropping images. I want to be
able to drag various images into various drop targets, and when they
are dropped, they should call a function that I've defined.

A regular of this group, Lasse Reichstein Nielsen, posted a drag and
drop script in this group about 2 years ago. I have an example of a use
of it at http://www.cwdjr.net/2dhtml/newDrag.php . If you want the code
in html 4.01 strict, view with IE6 to get the source. If you want xhtml
1.1, view with a recent Firefox or Opera browser. This script seems to
work for the common recent browsers, and you may drag and drop images
or text. This may not be exactly what you want, but at least it shows a
way to make things stay put when you drag and release the mouse button.
I just checked the page on IE6 and the most recent versions of Opera,
Firefox, Netscape, and Mozilla to make certain it is still working
after several browser upgrades after this page was first written.

Hopefully Lasse Nielsen will see your post and can make some additional
comments on your applicatioin.

 

[Lasse Reichstein Nielsen]

Please include some context for your posting.


[positions calculated before images (apparently without width/height
set) are loaded]

So I am using
setInterval with a function that includes all the code for calculating
the position of the drop targets - and this is in an if statement that
checks to see whether all the images on the page have been loaded.

Wouldn't the page's onload hander be sufficient? It shouldn't fire until
all images are loaded.

But, alas, I have
another problem. Within this code is included the main wz_dragdrop
method, The way it works is that you pass the names or
id's of the elements that you want to make draggable (or droppable),
separating them by commas. But I want this list of elements to be
dynamic, so I can't just call SET_HTML(elem1, elem2, elem3).

How are the dynamic set of id's stored? If it is an array, you could
consider doing SET_HTML.apply(null, idArray).

I have to create a list (comma-separated string)

Why not an array?

and pass it into the function using eval (yes, I'm using eval - so
shoot me).

*BLAM*

I'm certain that your problem can be solved without eval, and probably
easier too.

Apparently, eval is having trouble being called inside a function -
does anyone know anything about this problem?

Eval has no problem being called inside a function scope. I guess
your problem is that it doesn't do what you assume it shoud, but
it's most likely the assumption that is wrong. Knowing neither
what it does, nor what you expect it to do, it's impossible to say
what the problem is (apart from using eval to begin with).

/L

 

[Joel Byrd]

You could probably safely use:
Maybe you're not understanding the problem. Let's say you have 3
images with id's: "draggable_0", "draggable_1", and "draggable_2". To
make these images draggable, you would call the SET_DHTML in *exactly*
the following way:

SET_DHTML("draggable_0", "draggable_1", "draggable_2");

So, you have to pass strings into the method - you cannnot pass in an
array, and you cannot pass in a variable that evaluates to a string
(e.g. the idArray.join() you were suggesting). Passing in a variable
that evaluates to a string just does not do the same thing as passing
in an actual string. Well, in fact, it plain does not work - I had
already tried what you suggested, but it does not work unless I use the
eval() function.

Just as a note, though, I was wrong about eval() having trouble when
called inside a function - there's another problem, and it has
something to do with the timing of the SET_DHTML(). I'm not sure.
Maybe something to do with the fact that Walter Zorn (author of the
wz_dragdrop.js) requires that the script we've been discussing be
included just before the closing body tag.

 

[Joel Byrd]

Eval has no problem being called inside a function scope. I guess
Yes, you're right. eval() is not the problem. And I wasn't familiar
with the apply() mehod - yeah, it actually works so that I don't have
to use eval(); well, sort of. It works, if I want the equivalent of
calling SET_DHTML in the following way:

SET_DHTML("element_0", "element_1", "element_2");

But, Walter Zorn offers more functionality. He allows you to add
arguments that apply to all your draggable elements globally or just
individual elements, and the syntax is similar to the following:

'SET_DHTML(TRANSPARENT, SCROLL, "element_0"+CURSOR_HAND, "element_1" );

where TRANSPARENT, SCROLL, and CURSOR_HAND are actually global
constants that are set to something like 'dIApHAn', 'sC81L', and
'c:hand', respectively.

So, I'm not quite sure how to deal with this. Any suggestions/ideas?

 

[Joel Byrd]

Actually, I figured out how to do this. So I've got everything squared
away, but I've still got the problem with Opera, and the positions
being calculated before the images load.

Well, this doesn't work because of something having to do with Walter
Zorn's requirement that the SET_DHTML() method be called right before
the closing body tag. I'm not quite sure, but it doesn't work.

 

[cwdjrxyz]

Actually, I figured out how to do this. So I've got everything squared
away, but I've still got the problem with Opera, and the positions
being calculated before the images load.


Well, this doesn't work because of something having to do with Walter
Zorn's requirement that the SET_DHTML() method be called right before
the closing body tag. I'm not quite sure, but it doesn't work.

You do not give an example of the code you are now using. However, the
test example you give in your initial post has 549 validation errors
when validated at the W3C validator as html 4.01 strict using the
extended interface. One of the main problems is that you are using
xhtml tags such as <br /> which are not allowed in html 4.01 strict.
There are also other validation problems. I suggest that, whatever code
you are now using, you first get it to validate as html 4.01 strict at
W3C. Then if you post a valid code example, someone may be more likely
to help you. Having to clean up 549 validation errors might require
more time than most of us have. Who knows, cleaning up the validation
could eliminate the problem for Opera. If not, at least it likely may
be more easy to find.