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

Posted 2023-05-08

【中文标题】JQuery Draggable with hover + custom helper 区别（IE vs Chrome）

【英文标题】：JQuery Draggable with hover + custom helper difference (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 中一样。

谢谢！

【参考方案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。