我有简单的 ol-li 结构,想添加拖放功能。此外,我想以不同的颜色突出显示悬停项目和拖动项目。但这是 WebKit 中的一个不寻常的错误。
- 捕获最后一个项目。
- 将其拖到顶部。
- 将其拖放到第一项。
最后一个元素捕获悬停伪类!为什么?我该如何预防?
这是一个例子:
http://jsfiddle.net/zFk2V/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);
}
Use the mouseover
and mouseout
函数并添加/删除名为的类hovered
而不是使用 CSS:hover
伪类。这里是更新了 jsFiddle https://jsfiddle.net/t2j3yrbw/
要添加的 Javascript(在 for 循环内)
li.addEventListener("mouseover", () => {
li.classList.add("hovered");
});
li.addEventListener("mouseout", () => {
li.classList.remove("hovered");
});
CSS
.hovered {
background: #fc9;
}
旁注:小心不要选择全部li
选择变量时在您的页面上。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)