HTML is not updated when using Mootools dragging

Question

I'm using Mootools (don't think it is related to the problem) to drag and drop and element.

var draggable = new Drag(timeHandle, {            
    onDrag: function () {           
        var calculatedTime = calcTime();     
        $('timeLabel').innerHTML = calculatedTime;
    },
});

Basically, I can drag my 'timeHandle' and the 'timeLabel' is getting updated properly. The problem is that sometimes, after moving the handle a little bit, suddently, the UI is not getting updated. The 'timeHandle' is not moving and the 'timeLabel' is not getting updted. The problem is not with the drag event, I can see it keeps on getting called.

When I move

$('timeLabel').innerHTML = calculatedTime;

everything works fine. So, the problem is not with the 'Drag' object since the event is kept on calling. Looks like some UI performance issue.

Thanks

Answer 1

OK, found a to make it work. I still not sure what caused the problem but it looks like the 'innerHTML' command has either really poor performance which causes problems in the GUI updates or maybe some kind of internal mechanism (IE only? which is supposed to prevent the UI from updates overflow.

Anyway, instead of using the innerHTML, I'm doing the following:

var draggable = new Drag(timeHandle, {            
     onDrag: function () {             
         var calculatedTime = calcTime();     

         var element = $('timeLabel');
         element.removeChild(element.firstChild);l
         element.appendChild(element.ownerDocument.createTextNode(calculatedTime)); 
    },
});

Works like a charm