I've been tearing my hair out over this strange behaviour despite lots of Googling!

I have created a draggable div element, and a series of droppable divs which should highlight when hovered over. When I click and drag, my helper behaves as expected, but my droppable divs don't... the droppable element half a screen to the right of the mouse is the one that gets highlighted, which seems especially strange as the y-axis seems to work properly. Here's a simplified and anonymised fiddle of what I'm trying to do that shows the behaviour: [Fiddle](http://jsfiddle.net/tnhirst/fpa0d1uy/)

I believe it might have something to do with me using appendTo in the draggable function, which I want to keep to move my item across divs. Is this where I'm going wrong?

A lot of my Googling finds people struggling with scrolls on a page, but I don't have any x-axis scrolling at all here.

Here's the code that's also in the fiddle:

```js
var bucket_string = "#Bucket1";
var div_defect = document.createElement("div");
div_defect.className = "item";
div_defect.innerHTML = "Item 1";
$(bucket_string).append(div_defect);

$('.item').draggable({
    appendTo: '#workspace',
    helper: 'clone',
    cursor: 'move',
    revert: true,
});

  $('.item').bind("drag", function (event, ui) {
      var width = $('.item').width();
      ui.helper.css("width", width);
      ui.helper.css("font-size", "x-small");
  });

  $('.Bucket').droppable({
      accept: '.item',
      hoverClass: 'hovered',
  })
```