Event Queue Blocking in Internet Explorer 9

Question

I am working on a project where it would be great to have a drag and drop list. I got this to work without the hassle of using HTML 5 Drag and Drop. My problem is that the list can be long and therefore it is actually unloaded or “loaded to scroll” or whatever you want to name it. It just works by responding to a scroll event and loading more data through AJAX.

Thus, there is a “bump scroll” function in the list, I implemented this by having two normally invisible divs at the top and bottom of the viewport. When they receive a dragover event, they simply increase or decrease the top of the scroll bar of the viewport. Pretty simple. In the violin, I gave them a background so you can see them. If you try the fiddle in FF or Chrome, you will see that when the ajax call completes the user interface updates. This does not happen in IE.

dojo.byId("bumpScrollDown").connect("dragover", function(bump) { wrapper.scrollTop -= 20; dojo.xhrGet({url: "/echo/json/"}).then(function() { // THIS WILL NEVER FIRE on IE 9 UNTIL THE DRAG // OPERATION IS COMPLETED dojo.byId("log").innerHTML += "callback... "; }); }); 

The problem is that dragging and dropping IE 9 seems to overwhelm the event loop, so nothing happens - ajax callbacks, timeouts, etc. do not fire while the drag is in progress. It looks like it would bring in a lot of things, including animations starting with dragover, etc.

Does anyone know how I can make this work? Can I cancel a drag event and start again? A call to dragdrop () will start the drag again if I can somehow cancel it to activate the ajax callback.

In the fiddle, you can see that none of the AJAX calls raised by the drag event will trigger callbacks until the drag and drop has finished. This does not occur on chrome or FF.

http://jsfiddle.net/stevendwood/5VWZk/4/

UPDATE: it works better on IE10

Answer 1

I do not have IE9 for testing, but ...

Also, I might be completely wrong here, but you checked if this is due to the stopEvent bit inside this code:

 dojo.connect(wrapper, "dragover", function(ev) { if (!dojo.hasClass(ev.target, "noDroppy")) { dojo.addClass(ev.target, "dragover"); //dojo.stopEvent(ev); } }); 

otherwise:

I recently wrote similar code in jQuery.

My solution was to check if the drag over the shock was hanging inside the drag event itself, and not a separate shock wave guidance event.

You can even check how far down or up you drag to beats to adjust the scroll speed.

Hope this helps.