Question

我正在使用Mootools（不要认为它与问题有关）拖放和元素。

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

基本上，我可以拖动'timeHandle'并且'timeLabel'正在更新。问题在于，有时候，在突然移动手柄之后，UI不会得到更新。 'timeHandle'没有移动，'timeLabel'没有被更新。问题不在于拖拽事件，我可以看到它一直被调用。

当我搬家时

$('timeLabel').innerHTML = calculatedTime;

一切正常。因此，问题不在于“拖动”对象，因为事件一直在调用。看起来像是一些UI性能问题。

谢谢

Answer 1

要简化代码，您可以使用Element.set('text', 'my text here');

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

另外，请记住删除最后一个逗号，否则它将在Internet Explorer中引发错误。

Answer 2

好的，找到一个让它工作。我仍然不确定是什么导致了这个问题，但看起来'innerHTML'命令的性能非常糟糕，导致GUI更新出现问题，或者某种内部机制（仅限IE？这应该会阻止UI更新溢出）

无论如何，我没有使用innerHTML，而是在做以下事情：

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

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

像魅力一样工作

使用Mootools拖动时不会更新HTML

2 个答案: