:悬停在拖放时粘到元素上

Question

我有简单的ol-li构造,想要添加拖拽它.另外我想突出显示不同颜色的悬停项目和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函数,并添加/删除一个被调用的类,hovered而不是使用CSS :hover.这是更新的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,ol喜欢id='dragableList'和改线var lis = document.querySelectorAll("li")到var lis = document.getElementById('dragableList').querySelectorAll("li")万一你在项目中的某处有另一个列表以后.这是包括的jsFiddle