：悬停在元素上拖放 [英] :hover sticks to element on drag and drop

问题描述

我有简单的ol-li建设，并希望添加drag'n'drop。另外我想突出显示不同颜色的悬停项目和拖动项目。但是它是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（persist）; 
} ，假）; 
 for（var i = 0，n = lis.length; i< n; i ++）{
 lis [i] .addEventListener（dragstart，function（event）{
 drag = this; 
 ol.classList.add（persist）; 
}，false）; 
 lis [i] .addEventListener（dragover，function（event）{
 if（dragover）{
 dragover.classList.remove（dragover）; 
} 
 event.preventDefault（）; 
 dragover = this; 
 this.classList.add（dragover）; 
}，false）; 
} 
  

解决方案

code> .onmouseover 和 .onmouseout 函数，并添加/删除名为 hovered的类而不是使用CSS的：hover 。以下是更新的jsFiddle

Javascript添加（内部for循环）

  lis [i] .onmouseover = function（）{
 //添加'hovered'类
 this.className = this.className +hovered; 
} 
 lis [i] .onmouseout = function（）{
 //删除'hovered'类
 this.className = this.className.split（''）。 filter（function（v）{
 return v！='hovered'
}）。join（''）; 
} 
  

CSS

  .hovered {
 background：＃fc9; 
} 
  

旁注：我可能会添加一个ID到 ol like id ='dragableList'并更改行 var lis = document.querySelectorAll（li） to var lis = document.getElementById（'dragableList'）。querySelectorAll（li）只是为了在你的项目中有另一个列表稍后。 这里是包含

的jsFiddle

I have simple ol-li construction and want to add drag'n'drop to it. Additionaly I want to highlight hover item and dragover item in different colors. But it is an unusual bug in WebKit.

1. Capture last item.
2. Drag it to the top.
3. Drop it to the first item.

And last element capture the hover pseudoclass! Why? How can I prevent it?

This is an example:

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);
}

解决方案

You can simply add an .onmouseover and an .onmouseout function and add/remove a class called hovered instead of using CSS's :hover. Here is the updated jsFiddle

Javascript to add (inside for loop)

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;
}

Side note: I might add an id to the ol like id='dragableList' and change the line var lis = document.querySelectorAll("li") to var lis = document.getElementById('dragableList').querySelectorAll("li") just in case you have another list somewhere in your project later on. Here is the jsFiddle with that included

这篇关于：悬停在元素上拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！