：ドラッグ＆ドロップでホバーが要素に固執する

Question

私は単純なオルリ構成で、ドラッグアンドドロップを追加したい。私は、ホバー項目とdragover項目を異なる色で強調したいと思います。しかし、それはWebKitの珍しいバグです。

1. 最後の項目をキャプチャします。
2. 上部にドラッグします。
3. 最初のアイテムにドロップします。

最後の要素は、ホバー疑似クラスをキャプチャします。どうして？どうすればそれを防ぐことができますか？

これは一例です：

http://jsfiddle.net/zFk2V/3/

var lis = document.querySelectorAll("li"), 
    ol = document.querySelector("ol"), 
    dragged = false, 
    dragover = false; 
ol.addEventListener("drop", function(event) { 
    ol.insertBefore(dragged,dragover); 
    this.classList.remove("insistent"); 
}, false); 
for (var i=0, n = lis.length; i < n; i++) { 
    lis[i].addEventListener("dragstart", function(event) { 
     dragged = this; 
     ol.classList.add("insistent"); 
    }, false); 
    lis[i].addEventListener("dragover", function(event) { 
     if (dragover) { 
      dragover.classList.remove("dragover"); 
     } 
     event.preventDefault(); 
     dragover = this; 
     this.classList.add("dragover"); 
    }, false); 
} 

Answer 1

あなたは単に.onmouseoverと.onmouseout機能を追加し、代わりにCSSの:hoverを使用してのhoveredと呼ばれるクラスを追加/削除することができます。ここでupdated jsFiddle

Javascriptが

lis[i].onmouseover = function() { 
    // Adds the 'hovered' class 
    this.className = this.className + " hovered"; 
} 
lis[i].onmouseout = function() { 
    // Removes the 'hovered' class 
    this.className = this.className.split(' ').filter(function(v) { 
     return v!='hovered' 
    }).join(' '); 
} 

CSS

.hovered { 
    background: #fc9; 
} 

サイドノート（ループの内側）を追加することです：私はid='dragableList'ようolにIDを追加し、ラインvar lis = document.querySelectorAll("li")を変更する場合がありますvar lis = document.getElementById('dragableList').querySelectorAll("li")あなたのプロジェクトのどこかに別のリストが後である場合に備えて。 Hereはそれを含むjsFiddleです

Answer 2

ここで私はそれをどのように解決しましたか？残念なことに私は少しJSに頼らざるを得ませんでした。

マイページには、ホバーでハイライト表示される折りたたみレコードがあります。レコードをクリックするとレコードが展開され、強調表示が無効になります。もう一度クリックすると、再び崩壊してホバーを再開します。

$(document).on('click', ".container.clickable", function(e){ 
    var $this = $(this); 
    $this.toggleClass('expandable'); 
    if ($this.hasClass('expandable')) { 
    $this.on('mouseenter', function(){ 
     // workaround to stop a stuck :hover 
     $this.addClass('hilitable'); 
     $this.off('mouseenter'); 
    }) 
    } else { 
    $this.removeClass('hilitable'); 
    } 
});