Sign in to follow this  
Mathachew

[web] Quirk with IE and JS

Recommended Posts

I can't seem to debug my way out of this one. If you're familiar with Tool-man's drag and drop script, then this should be easier to visualize. My boss didn't like the way the drag and drop method was working with Tool-man, so he told me to come up with a solution that mimics the sorting method in our Windows based software in building automation. Instead of seeing what you're dragging (like in Tool-man), an orange line needs to be drawn where the item will be dropped. So no animation is involved, simply drawing a line on the top border to give the user the impression that "if you let go, this is where it will be placed". The script works perfectly in FF, but has one small glitch in IE (as if we haven't heard this tune before). When the item is dropped, it is removed from its old position and is inserted where dropped. When this happens in IE, the item that is now inserted cannot be dragged. I put in a debugger and nothing happens when I'm over that item. The same applies when items are added to this list. I cannot drag any of the newly added items and the debugger gives me no information about the row, only on rows that were originally added. Enough babbling, here's a link to a test page with the full source code inside. Any help would be great :) Removed url. Two things to note: 1. I know I don't have to have embedded onmouse events in my HTML, but I haven't done enough advanced JS scripting to accomplish this like Tool-man has. If this could solve my problem, then I'm more than willing to learn it. 2. I used a button so that when you did a click and drag motion, it doesn't start highlighting everything. Tool-man also did this but again, advanced JS code makes Mathachew go cwazy! Edit: The reason my boss didn't want Tool-man is that our users are idiots and seeing yourself drag the contents and having each item move around what you're dragging is too complicated. O.o [Edited by - Mathachew on October 11, 2006 10:20:29 AM]

Share this post


Link to post
Share on other sites
Quote:
Original post by tstrimp
I didn't look through your JS but a simple modification to the Yahoo! User Interface library produces the results you want. The display issues in IE can be fixed via the stylesheet.

Modified Yahoo UI Drag Drop List.


Dude, what's wrong with you!? I didn't ask for something else, I asked for help to figure out my problem! GOSH!!! (hehe)

Thanks, but as I told you in our chat, it doesn't tell me why my code isn't working. I may have to fall back on this if I can't find out what's wrong. We shall see...

[Edited by - Mathachew on September 6, 2006 4:23:35 PM]

Share this post


Link to post
Share on other sites
Ok, I see now that IE, as always, sucks and doesn't like setAttribute. So the workaround that I've seen posted is to set the attribute like so:

var ele = document.createElement('li');
ele.id = 'id';

However, this is not working for me. I've tried setting several other values in case IE doesn't set the ID unless "this" is specified, but to no avail. Any recommendations? Does IE work in this manner but not for <li>? Oi!

The only thing hold this feature back is, ugh, IE and it's stupidity.

Share this post


Link to post
Share on other sites
Quote:
Original post by Mathachew
The only thing hold this feature back is, ugh, IE and it's stupidity.


If you want to get technical the only thing holding the feature back is you since I posted a reasonable, working, alternative above. [wink]

Share this post


Link to post
Share on other sites
Bah! Again I say bah! The script is so close to being done, there's no need for me to include a bunch of different JS files just so that I can accomplish this task which, again, is so close to being done.

Through some debugging I found that when I call ele.getAttribute('id') and alert it, it gives me the correct ID. So I'm thinking the problem may lie in that it's not being added to the correct parent node, but then, it's listed with all the other stuff, which is baffling.

Does anyone other than that goofball the Strimple (as I like to call him) have any suggestions on troubleshooting my code?

Share this post


Link to post
Share on other sites
I finally figured it out. The problem lied not in the ID of the element, but in the setting of the element's events (mouseover, mouseout, etc.). I had to create a new object after adding the child node and then set the event attributes on that object. hooray!

Before:

var ele = document.createElement('li');

ele.id = 'p'+id;
ele.onmousedown = function() { OnMouseDown(id); }
ele.onmouseup = function() { OnMouseUp(id); }
ele.onmouseover = function() { OnMouseMove(id, 'over'); }
ele.onmouseout = function() { OnMouseMove(id, 'out'); }

list.insertBefore(ele, document.getElementById('p'+val));




After:

var ele = document.createElement('li');
ele.id = 'p'+id;

list.insertBefore(ele, document.getElementById('p'+val));

var ele = document.getElementById('p'+id);
ele.onmousedown = function() { OnMouseDown(id); }
ele.onmouseup = function() { OnMouseUp(id); }
ele.onmouseover = function() { OnMouseMove(id, 'over'); }
ele.onmouseout = function() { OnMouseMove(id, 'out'); }





I also had to specify function() { blah(); } since using anything else didn't work. Whew, I'm ready to go home now (still got three hours left). Take that Strimple boyeee!!

Share this post


Link to post
Share on other sites
Quote:
Original post by kwackers
It sounds like you were recreating the node when it was dragged (your example has gone). Can't you just attachChild it to the new destination?


I was recreating the node in a different position and deleting it from its original position. The problem with the script was that IE didn't like my assigning of events. See my reply before yours, it shows where the problem was.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this