Question

我有一个可拖动的div，具有简单的悬停效果。当我使用“helper：clone”选项拖动此div时，拖动元素（Internet Explorer）时不会删除悬停效果。但是，如果我使用Chrome，则效果会被删除。

我的CSS：

.div-draggable
{
  width: 100px;
  height: 25px;
  border: 1px solid #000;
  cursor: pointer;
}

.div-draggable:hover
{
  background: blue;
  border-color: red;
}

我的JS：

$(document).ready(function() {
  $('.div-draggable').draggable({
  helper: "clone"
  })
});

这是一个包含我的问题的JsFiddle（请使用Chrome和IE打开）

http://jsfiddle.net/m3GyL/

我需要删除悬停效果，因为我想自定义我的帮助元素，但由于悬停的背景+边框，我无法正确执行。

任何人都可以帮助我吗？我需要让它在IE中运行，就像在Chrome中一样。

谢谢！

Answer 1

我们可以使用拖动启动事件处理程序并在拖动时更改辅助ui元素的css，这样可以确保它在浏览器中工作：

    $(document).ready(function() {
      $('.div-draggable').draggable({
        helper: "clone",
        start: function(e, ui) {
          $(ui.helper).css("background", "white").css("border-color","black");
        }
      });
    });

希望这会有所帮助，请找到解决的小提琴here。

带有悬停+自定义助手差异的JQuery Draggable（IE vs Chrome）

1 个答案: