Question

I have a draggable div with a simple hover effect. When I drag this div using the “helper:clone” option, the hover effect is not removed while dragging the element (Internet Explorer). However, If I use Chrome, the effect is removed.

My CSS:

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

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

My JS:

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

Here is a JsFiddle containing my problem (open with Chrome and IE please)

http://jsfiddle.net/m3GyL/

I need to remove the hover effect because I want to customize my helper element, but I cant do it properly because of the background + border from hover.

Can anybody help me? I need to make it work in IE, like it works in Chrome.

Thanks!

Answer 1

We can use the drag start event handler and change the css for helper ui element while it’s being dragged which ensures it’s working across browsers as well:

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

Hope this helps and please find the solved fiddle here.