CSS / HTML5:拖放后保持悬停状态

css / html5 :hover state remains after drag and drop

本文关键字：悬停 状态 拖放 HTML5 CSS      更新时间：2023-09-26

我正在使用html5的拖放功能在屏幕上重新排列dom元素 - 当我这样做时，我将css行为附加到拖放的各种状态，但是我遇到的问题是，即使在我拖放和鼠标悬停后，悬停状态仍然存在DOM元素。这是我的代码：

JAVASCRIPT：

function addDragListeners(){
    $('.segmentListItem').each(function(index){
        $(this)[0].addEventListener('dragstart',handleDragStart,false); //rollover for current
        $(this)[0].addEventListener('drop',handleDrop,false); //drops dragged element
        $(this)[0].addEventListener('dragover',handleDragOver,false); //allows us to drop
        $(this)[0].addEventListener('dragenter',handleDragEnter,false); //rollover for target
        $(this)[0].addEventListener('dragleave',handleDragLeave,false); //sets dragged item back to normal
        $(this)[0].addEventListener('dragend',handleDragEnd,false); //sets all back to normal
    });
}
function handleDragEnter(e) {
        // this / e.target is the current hover target.
        this.classList.add('over');
}
function handleDragLeave(e) {
        this.classList.remove('over');  // this / e.target is previous target element.
}
function handleDragEnd(e){
    $('.segmentListItem').removeClass('over'); //removes the over class on all elements
}
function handleDragStart(e){
    draggedItem = this;
    e.dataTransfer.effectAllowed = 'move';
}
function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.
    }
    e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
    return false;
}
function handleDrop(e){
    if (e.stopPropagation) {
        e.stopPropagation(); 
    }
    if (draggedItem != this) { //MH - swap if we're not dragging the item onto itself
        var draggedIndex = $('.segmentListItem').index($(draggedItem));
        var targetIndex = $('.segmentListItem').index($(this));
        if (draggedIndex > targetIndex){
            $(draggedItem).insertBefore($(this));
        } else {
            $(draggedItem).insertAfter($(this));
        }
    } 
    return false;
}

.CSS：

a { border-radius: 10px; }
a:hover { background: #ccc; }
.segmentListItem { text-align:center; width: 50px; margin-right: 5px; font-size: 16px; display:inline-block; cursor:move; padding:10px; background: #fff; user-select: none; }
.segmentListItem.over { background: #000; color: #fff; }

状态（六年后）

根据 https://bugs.webkit.org/show_bug.cgi?id=134555，这曾经是一个错误。但是，它必须在此期间已修复，因为它无法在现代浏览器中再重现。我仍然可以复制它的唯一浏览器是IE11。

工作修复

您可以将 CSS :hover替换为从 JS 切换的.hover类，以便更好地控制悬停状态：

document.querySelectorAll('.segmentListItem a').forEach(function (item) {
  item.addEventListener('mouseenter', function () {
    this.classList.add('hover');
  });
  item.addEventListener('mouseleave', function () {
    this.classList.remove('hover');
  });
});

下面的代码片段：

function addDragListeners() {
  $(".segmentListItem").each(function(index) {
    $(this)[0].addEventListener("dragstart", handleDragStart, false); //rollover for current
    $(this)[0].addEventListener("drop", handleDrop, false); //drops dragged element
    $(this)[0].addEventListener("dragover", handleDragOver, false); //allows us to drop
    $(this)[0].addEventListener("dragenter", handleDragEnter, false); //rollover for target
    $(this)[0].addEventListener("dragleave", handleDragLeave, false); //sets dragged item back to normal
    $(this)[0].addEventListener("dragend", handleDragEnd, false); //sets all back to normal
  });
}
function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add("over");
}
function handleDragLeave(e) {
  this.classList.remove("over"); // this / e.target is previous target element.
}
function handleDragEnd(e) {
  e.preventDefault();
  $(".segmentListItem").removeClass("over"); //removes the over class on all elements
}
function handleDragStart(e) {
  draggedItem = this;
  e.dataTransfer.effectAllowed = "move";
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  e.dataTransfer.dropEffect = "move"; // See the section on the DataTransfer object.
  return false;
}
function handleDrop(e) {
  if (e.stopPropagation) e.stopPropagation();
  if (draggedItem != this) {
    //MH - swap if we're not dragging the item onto itself
    var draggedIndex = $(".segmentListItem").index($(draggedItem));
    var targetIndex = $(".segmentListItem").index($(this));
    if (draggedIndex > targetIndex) {
      $(draggedItem).insertBefore($(this));
    } else {
      $(draggedItem).insertAfter($(this));
    }
  }
  return false;
}
// JS fix starts here:
document.querySelectorAll('.segmentListItem a').forEach(function(item, idx) {
  item.addEventListener('mouseenter', function() {
    this.classList.add('hover');
  });
  item.addEventListener('mouseleave', function() {
    this.classList.remove('hover');
  });
});
// and ends here. Comment these lines, and uncomment the `a:hover` rule in CSS in order to see the initial code
addDragListeners();
a {
  border-radius: 10px;
}
/* a:hover {
  background: #ccc;
} */
.segmentListItem {
  text-align: center;
  width: 50px;
  margin-right: 5px;
  font-size: 16px;
  display: inline-block;
  cursor: move;
  padding: 10px;
  background: #fff;
  user-select: none;
}
.segmentListItem.over {
  background: #000;
  color: #fff;
}
.hover {
  background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li class="segmentListItem">
    <a href="#">test1</a>
  </li>
  <li class="segmentListItem">
    <a href="#">test2</a>
  </li>
  <li class="segmentListItem">
    <a href="#">test3</a>
  </li>
</ul>

相关文章：