pickIE pickIE

I spent yesterday looking for a nice solution for drag selecting multiple items on a page. After trying several keywords to try and find what I was actually looking for (drag and drop seemed to dominate the results), I finally stumbled across this solution: http://drjavascript.com/drag-select/.

I downloaded the script keeping the copyright intact, plugged it into my own demo page and it works perfectly.... in FF. I happily pulled up an IE browser and got the ominous error message sound with an always helpful "Operation Aborted".



Thanks IE for the specific error message. I'll be sure to track that down.

I noticed that it worked fine on the originating site, but it was dying on my test site. That had me scratching my head. So I proceeded to cut and paste function by function back into the script tags to see exactly what syntax it was bombing on. It finally bombed on a certain function in the script. But when I left that function in and cut out a previous function, it wouldn't bomb. So again I was back to scratching my head.

Well, after flailing for a while, I decided to leave that rabbit trail and focus more on the ambiguous "operation aborted". After varied search results I came across a statement saying that IE doesn't like you changing the DOM before it is done writing it completely. I went back to my script and looked for things that were changing the DOM. There were two sections of code where it was doing a document.body.appendChild( obj ). When I commented those lines out, all was fine.

Ok... so that was it... now how to fix it.

Now that I could google with a more accurate sense of the problem, I found that you can add a defer attribute to the script tag like so:

<script type="text/javascript" language="javascript" defer="true">

This allowed the entire DOM to load before running the drag select init code. One more question remained however. Why did the originating site work and my test site not work. On out test framework, the test template that I am using doesn't have the final word as to what the DOM looks like. We do some post execution code after the core content is generated. So since the drag-select code was initialized in the core content, the DOM was still being worked on after my test. That would explain the difference between the two sites.

Hope this helps...