Когда я перемещаю зависший узел на новое место, он все еще отображается как зависший. Как я могу найти это?

Question

В IE7 и IE8, когда я перемещаю указанную ссылку на новое место, она все равно отображается как указанная.В Firefox и Chrome ссылка отображается как непринятая.В приведенном ниже примере, если вы нажмете на ссылку, она будет перемещена во второй ряд, но все равно будет красной.Можно ли исправить такое поведение?

<style>
a { color:blue; }
a:hover { color:red; }
</style>
<div id="div1">
    First Row
    <a id="a1" href="javascript:void(0);" onclick="document.getElementById('div2').appendChild(this);">Click It</a>
</div>
<div id="div2">
    Second Row
</div>

Живой пример

Answer 1

Мне это не нравится, но клонирование узла и удаление оригинала, кажется, работает:

<a id="a1" href="javascript:void(0);" onclick="document.getElementById('div2').appendChild(this.cloneNode(true)); this.parentNode.removeChild(this);">Click It</a>

Живой пример

Там, а не на самом делеперемещая узел, мы делаем его глубокий клон (cloneNode(true)) и добавляем его вместо этого.Затем мы удаляем оригинал (this.parentNode.removeChild(this)).Похоже, это не позволяет хранить информацию о состоянии, которую хранит IE.