jQuery-UI: Drag and Drop sometimes not working eventhough mouse is inside drop area

I created a list from which items can be dragged and dropped into items of another list. The problem is sometimes when the item is dragged at the edge and dropped on the edge of the droppable item nothings happens eventhough the mouse was inside the droppable item. Is there a way to improve this?

Fiddle example grab the draggable item’s right edge and drop it on the droppable items left edge. Eventhough the mouse is clearly inside the droppable element the console.log does not register

jquery

$( ".left li" ).draggable({
    helper: 'clone'
});
$( ".right li" ).droppable({
    accept: '.left li',
    drop: function(ev, ui){
    console.log('dropped inside right li')
  }
});

html

<ul class="left">
  <li>drag1</li>
  <li>drag2</li>
  <li>drag3</li>
  <li>drag4</li>
  <li>drag5</li>
</ul>
<ul class="right">
  <li>drop1</li>
  <li>drop2</li>
  <li>drop3</li>
  <li>drop4</li>
  <li>drop5</li>
</ul>

css

.left {
  float:left;
}

.left li {
  width: 100px;
  height: 30px;
  border: 1px solid black;
}

.right {
  float:right;
}

.right li {
  width: 100px;
  height: 30px;
  border: 1px solid black;
}

Answer

The issue, I suspect, is with your droppable. You’re making each list item a droppable instead of its parent.

http://jsfiddle.net/Twisty/1ofa25zx/

JavaScript

$(document).ready(function() {
  function log(str) {
    $("#log").prepend("<div>" + str + "</div>");
  }
  $(".left li").draggable({
    helper: 'clone'
  });
  $(".right").droppable({
    accept: '.left li',
    drop: function(ev, ui) {
      log('Drop on: ' + $(this).attr("class"));
      var item = $("<li>", {
        class: "dropped"
      }).html(ui.helper.text()).appendTo($(this));
    }
  });
});

As you can see here, drop is triggered when an item lands on the ul.right. If you want, you can also adjust the tolerance.