javascript - jQuery :hover selector not working as expected in Edge and Firefox

Question

我正在尝试使用 sortable js 创建一个拖放系统，您可以在其中通过简单地将它们从容器中扔出来删除图 block 。 问题是虽然代码适用于 Chrome，但不适用于 Firefox、Edge 或 IE。 这三个的结果是它永远不会删除磁贴

链接:http://skynet.ie/~alanfinnin/stack_overflow/js_drag_and_drop/

我四处寻找我尝试过的解决方案..

1. 将所有的不透明度改为 1，没有变化
2. 使用不同风格的悬停，即 is(hover)

3. 悬停时更改 div 的颜色，这有效但没有解决问题

   onEnd: function(event) {            
       if (($('#lists:hover').length == 0)) {
           alert("delete");
       }
   }
   

我希望当 tile 移出 div 时，悬停将变为 0 并引发警报，但结果在 Firefox 和 Edge/IE 中始终为 0，就好像它从未离开过 div 一样

注意:我正在使用 IE 11 和 firefox 版本 67.0.1

Answer 1

触发 onEnd 事件时，Sortable 会为您提供鼠标位置。

既然你有了它并且有了容器的位置和尺寸，你就可以自己计算是掉落在容器内还是容器外。它肯定适用于所有浏览器，因为我们所做的只是简单的计算。

您需要的代码是:

onEnd: function(event) {
    let mousePositionX = event.originalEvent.clientX; //mouse position x
    let mousePositionY = event.originalEvent.clientY; //mouse position y

     //container is the sortable container
     let container = $("div#lists");
     let containerOffsetLeft = parseInt(container.offset().left);
     let containerWidth = parseInt(container.width());
     let containerOffsetTop = parseInt(container.offset().top);
     let containerHeight = parseInt(container.height());

     if(
        (mousePositionY < containerOffsetTop) ||
        (mousePositionY > (containerOffsetTop + containerHeight)) ||
        (mousePositionX < containerOffsetLeft) ||
        (mousePositionX > (containerOffsetLeft + containerWidth))
     ) {
        alert('remove');
     }
}