css - 可拖动的 jQuery UI 不触发 CSS :hover state

Question

上次编辑:我找到了 this问题。这看起来是 Chrome 的问题。

---

我试图将一个 jQuery UI 可拖动元素拖到一个元素上，该元素在 CSS :hover 上调出(基于 z-index)它的一些子元素。我需要那些 child 接受我的拖动对象(它们都是 jQuery UI 可放置的)。

这是 jsFiddle .

它应该如何工作:将左侧元素上的蓝色圆圈拖到右侧元素上的另一个圆圈。可拖动元素变为红色，所有可放置元素必须置于顶部并变为绿色边框。如果我们将一个圆圈从右边的元素拖到左边的元素，则预期会有相同的行为。

在每个 drop 事件之后，所涉及的可拖放元素会变成粗边框，作为用户操作的视觉反馈。

但是，我已经在以下浏览器中测试了这个，每个浏览器都有一些问题:

• Chrome 43.0.2357.124 m - CSS :hover 状态未触发，但可放置元素接受可拖动元素。来自可放置元素的 activeClass 和 hoverClass 拒绝工作，CSS :hover 也有同样的问题。
• Firefox 38.0.5 - 只有在可拖动元素中使用 cursorAt 选项时才会触发 CSS :hover 状态。来自 droppable 元素的 activeClass 和 hoverClass 也可以正常工作。 Firefox 中的问题是未触发可放置的 drop 事件(或者我错误地引用了元素本身)。
• Internet Explorer 11.0.20 - 没有任何效果，它会在控制台中引发一些错误(访问被拒绝，“jQuery”未定义，“$”未定义)。

在将近一天半的时间里，我试图弄清楚这是 jQuery 故障、浏览器问题，还是我的代码有任何问题。当然，还要为这个问题找到一个跨浏览器的解决方案。

感谢您的宝贵时间和关注!

---

编辑:更新了 jsFiddle 链接。

Answer 1

Internet Explorer 的解决方案非常简单。您使用的是过时版本的 jQuery。您使用的是 1.10.1 版本，但当前支持的版本是 2.1.3。切换到更新版本应该可以解决现代浏览器中的问题。

$(function() {
    $("#flowEditor").disableSelection();
    $("button").on("click", function() {
        $("span.anchor").css("border-width", "2px");
    });
    $("span.anchor").draggable({
        helper: "clone",
        accept: "span.anchor",
        containment: "#flowEditor",
//    cursorAt: { top: -10, left: -10 },
        start: function(event, ui) {
            $(ui.helper).css("z-index", "9999999");
            $(ui.helper.context).addClass("context");
        },
        stop: function(event, ui) {
            $(ui.helper.context).removeClass("context");
            $(ui.helper.context).css("border-width", "5px");
        }
    }).droppable({
        accept: "span.anchor",
        activeClass: "active",
        hoverClass: "hover",
        drop: function(event, ui) {
            $(this).css("border-width", "5px");
        }
    });
});

#flowEditor {
  list-style-type: none;
  padding: 0px;
  height: 640px;
  box-sizing: border-box;
  border: 3px double gold;
}
#flowEditor li {
  width: 100px;
  height: 100px;
  margin: 4px;
  border: 1px solid wheat;
}
#flowEditor li span.caption {
  display: block;
  margin-top: 40px;
  height: 36px;
  text-align: center;
}
#flowEditor>li {
  background-color: white;
}
#flowEditor {
  position: relative;
}
#flowEditor li span.anchor {
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid blue;
  z-index: -1;
  cursor: pointer;
}
#flowEditor li:hover span.anchor {
  z-index: 999999;
}
#flowEditor li:hover span.anchor.active {
  z-index: 999999;
  border-color: green;
}
#flowEditor li:hover span.anchor.hover {
  z-index: 999999;
  background-color: green;
}
#flowEditor li span.anchor:hover {
  background-color: blue;
}
#flowEditor li span.anchor.context {
  background-color: red;
}
#flowEditor li span.anchor-top {
  top: -6px;
  left: calc(50% - 6px);
}
#flowEditor li span.anchor-left {
  left: -6px;
  top: calc(50% - 6px);
}
#flowEditor li span.anchor-right {
  right: -6px;
  top: calc(50% - 6px);
}
#flowEditor li span.anchor-bottom {
  bottom: -6px;
  left: calc(50% - 6px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<button>Reseteaza</button>
<ul id="flowEditor" style="width: 100%; height: 480px; border: 3px double gold;">
    <li class="ui-corner-all" style="position: absolute; left: 17px; top: 31px;">
        <span class="caption">Item 1</span>
        <img class="move" />
        <span class="ui-corner-all anchor anchor-top"></span>
        <span class="ui-corner-all anchor anchor-left"></span>
        <span class="ui-corner-all anchor anchor-right"></span>
        <span class="ui-corner-all anchor anchor-bottom"></span>
    </li>
    <li class="ui-corner-all" style="position: absolute; left: 170px; top: 31px;">
        <span class="caption">Item 2</span>
        <img class="move" />
        <span class="ui-corner-all anchor anchor-top"></span>
        <span class="ui-corner-all anchor anchor-left"></span>
        <span class="ui-corner-all anchor anchor-right"></span>
        <span class="ui-corner-all anchor anchor-bottom"></span>
    </li>
</ul>

---

至于为什么悬停效果不起作用，CSS 悬停事件似乎不会在鼠标按下时触发，除非它最初悬停在该特定元素上。为了无论​​是否按下鼠标都可以正常工作，JavaScript 比 CSS 更可靠地检测悬停事件。

例如，尝试从 div 外部按下鼠标，然后在 div 内部移动时不断按住它。请注意 CSS :hover 是如何在 JavaScript 触发时不触发的。

$('div').hover(function () {
    console.log(1);
});

div {
    padding: 10px;
    border: 1px solid black;
    background-color: white;
}
div:hover {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div><div></div></div>