/    Sign up×
Community /Pin to ProfileBookmark

Weird IE7 DragNDrop error using Scriptaculous

Copy linkTweet thisAlerts:
May 10.2009

Hi, I don’t even know how to describe this error, cause I am getting weird line numbers when IE7 tries to tell me where the error is. I basically have an absolutely positioned element that needs to be able to be dragged horizontally. I use this code and it works like a charm in Firefox and Safari, but not IE7:

[CODE]window.onload = function() {

var a = new Draggable(‘bar’, {

starteffect: false,
endeffect: false,
zindex: 0,
snap: function(x, y, draggable) {

var element = draggable.element.getDimensions();
var parent = draggable.element.parentNode.getDimensions();

return [
(x > 200) ? 200 : (x < (parent.width – element.width)) ? (parent.width – element.width) : x,
parent.height – element.height – 40
];

}

});

}[/CODE]

The code is pretty much straight out of a tutorial, and I have no idea why it doesn’t work in IE7. IE7 tells me the problem is in line “var element = draggable.element.getDimensions();”, but I am not that sure cause it has pointed me to blank lines before ? Does anybody know what the problem is? Is my browser on crack?

Thanks.

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@jonwonderingauthorMay 10.2009 — Got it, in case anybody else will be stuck with the same problem:

IE seems to have a problem with getDimensions() function. Don't know if this has to do with elements being set to absolute or what. But here's the workaround that makes it work in my browsers now:

[CODE]window.onload = function() {

var a = new Draggable('bar', {

starteffect: false,
endeffect: false,
zindex: 0,
snap: function(x, y, draggable) {

var pW, eW, pH, eH;
if (navigator.appName.indexOf("Internet Explorer") == -1) {

var element = draggable.element.getDimensions();
var parent = draggable.element.parentNode.getDimensions();
pW = parent.width;
pH = parent.height;
eW = element.width;
eH = element.height;

} else {

pW = document.body.clientWidth;
pH = document.body.clientHeight;
eW = document.getElementById("bar").offsetWidth;
eH = document.getElementById("bar").offsetHeight;

}

return [(x > 200) ? 200 : (x < (pW - eW)) ? (pW - eW) : x, pH - eH - 40];

}

});

}[/CODE]
×

Success!

Help @jonwondering spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...