JQuery Draggable with hover + custom helper 区别（IE vs Chrome）答案

【问题标题】：JQuery Draggable with hover + custom helper difference (IE vs Chrome)JQuery Draggable with hover + custom helper 区别（IE vs Chrome）
【发布时间】：2012-12-22 18:00:14
【问题描述】：

我有一个带有简单悬停效果的可拖动 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 中一样。

谢谢！

【问题讨论】：

标签： jquery hover clone draggable helper

【解决方案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。

【讨论】：