D
David Mertz
I have a little script that manages some drag-and-drop in web
browsers. The general idea is that you can drag some images to
certain places, but if you try to drop them somewhere else, they float
back to their original home. Pretty straightforward, and works
perfectly in Firefox. There *is* a problem in IE, but I'm pretty sure
that's because I'll need to wrap each <img> in a <div> to overcome
IE's "simplified" image drag-and-drop.
The perplexing problem is with Safari. I haven't tried it yet, but it
might therefore apply to other KHTML based browsers (Konquorer, etc).
The heart of the code is just the below, and the symptom is weird.
Rather than return to the proper location, images float back to (0,0)
(and pile up on top of each other). I don't show the mouseUp()
function below, but the heart of it, for this purpose, is a simple:
dragObject.style.left = dragObject.init_x;
dragObject.style.top = dragObject.init_y;
Incidentally, it occurred to me that Safari might be mysteriously
refusing to set the 'init_x' and 'init_y' attributes on the dragged
image, so I tried refactoring to use a 'init_pos' object that stored
the images in a dictionary (and looked up by their 'src'). That was
less pretty code, but also produced EXACTLY the same symptom.
In trying to debug this, I scattered some 'alert()'s in the code to
see what values were set. This mysteriously fixed the problem. At
first I thought it was something about alert()'ing on the same values
I was trying to retain; after a bit of winnowing down, I find that one
simple do-nothing alert in the onload code solves the whole problem
though. Taking it out makes it broken again though.
Here's the basic code:
function makeDraggable(item){
if (!item) { return };
item.init_x = item.x
item.init_y = item.y;
item.onmousedown = function(ev){
dragObject = this;
return false;
}
}
window.onload = function(){
alert('empty'); // Keeping this make app work in Safari!
var clips = document.getElementsByTagName('img');
for(var i=0; i < clips.length; i++) {
var clip = clips
if (clip.className=="clip") {
makeDraggable(clip);
}
}
dropTarget = document.getElementById('drop_target');
}
Obviously, keeping a spurious 'alert()' is no good. I wouldn't even
care if some other spurious code were a hack to fix it, as long as it
didn't bother the user (for example, a background onload delay of a
second would be acceptable if it didn't require user interaction).
Better, of course, would be for the thing simply to work correctly (as
it does in Firefox).
Thoughts?
browsers. The general idea is that you can drag some images to
certain places, but if you try to drop them somewhere else, they float
back to their original home. Pretty straightforward, and works
perfectly in Firefox. There *is* a problem in IE, but I'm pretty sure
that's because I'll need to wrap each <img> in a <div> to overcome
IE's "simplified" image drag-and-drop.
The perplexing problem is with Safari. I haven't tried it yet, but it
might therefore apply to other KHTML based browsers (Konquorer, etc).
The heart of the code is just the below, and the symptom is weird.
Rather than return to the proper location, images float back to (0,0)
(and pile up on top of each other). I don't show the mouseUp()
function below, but the heart of it, for this purpose, is a simple:
dragObject.style.left = dragObject.init_x;
dragObject.style.top = dragObject.init_y;
Incidentally, it occurred to me that Safari might be mysteriously
refusing to set the 'init_x' and 'init_y' attributes on the dragged
image, so I tried refactoring to use a 'init_pos' object that stored
the images in a dictionary (and looked up by their 'src'). That was
less pretty code, but also produced EXACTLY the same symptom.
In trying to debug this, I scattered some 'alert()'s in the code to
see what values were set. This mysteriously fixed the problem. At
first I thought it was something about alert()'ing on the same values
I was trying to retain; after a bit of winnowing down, I find that one
simple do-nothing alert in the onload code solves the whole problem
though. Taking it out makes it broken again though.
Here's the basic code:
function makeDraggable(item){
if (!item) { return };
item.init_x = item.x
item.init_y = item.y;
item.onmousedown = function(ev){
dragObject = this;
return false;
}
}
window.onload = function(){
alert('empty'); // Keeping this make app work in Safari!
var clips = document.getElementsByTagName('img');
for(var i=0; i < clips.length; i++) {
var clip = clips
if (clip.className=="clip") {
makeDraggable(clip);
}
}
dropTarget = document.getElementById('drop_target');
}
Obviously, keeping a spurious 'alert()' is no good. I wouldn't even
care if some other spurious code were a hack to fix it, as long as it
didn't bother the user (for example, a background onload delay of a
second would be acceptable if it didn't require user interaction).
Better, of course, would be for the thing simply to work correctly (as
it does in Firefox).
Thoughts?