IE smoothing a map pan when dragging

Question

I've trying to smooth out the performance of a map application i've been building using javascript. I initially implemented a dragging pan using

• onmousedown
• onmousemove
• onmouseup

However in IE it feels really sluggish and it appears that when you move the cursor really fast the map doesn't update it position until you stop moving.

I converted my code to use the native IE events

• ondragstart
• ondrag
• ondragend

The performance was MUCH better when using these events BUT it seems that I can't set the mouse cursor using the standard css properties. I can only set the cursor to a few predefined ones which is not what I want.

So my question is. How can I either smooth the drag in IE using the first set of events or how can I set a custom cursor using the native events.

EDIT: Code sample

The code is very very simple. Even when I remove the logic to load new tiles (i.e only the container is getting moved) it still feels clunky. Below is the pan function:

// the "this" object refers to the div containing all the tile layers.
function movemap(e) 
{ 
   e = e || window.event;
   var dx = this.mouseX - e.clientX; 
   var dy = this.mouseY - e.clientY; 

   if (dx !== 0 || dy !== 0) {
      this.style.left = parseInt(this.style.left) + dx + 'px'; 
      this.style.top = parseInt(this.style.top) + dy + 'px'; 
      this.mouseX = e.clientX; 
      this.mouseY = e.clientY;
   }
} 

Answer 1

It's really difficult to say, what makes your drag events to work slow, without code examples.

Sluggish effect can be due to some heavy operations you are running inside event execution. Event system in the browser is really interesting. It's synchronous. Which means, the event will be not triggered again, until the current execution is finished.

That means, you have two possibilities: 1. optimize your code inside event, so that it takes less CPU time or 2. make your event asynchronous and implement your own mutex/semaphor logic.

The second one you can do, by using setTimeout functionality. If you do setTimeout,((code),1) your event will continue asynchronously, so the next event will be dispatched without awaiting for your code to complete. Well, take in advance that in that case you have to start thinking about locking and queuing. By queuing I mean, to queue all dispatched events for future use.

Long time ago, I did also some asynchronous event dispatching, because of some heavy code execution. It worked for me. Maybe it will work for you too.