Droppable is not firing in jQuery UI

Question

HTML:

<ul id="tree">
    <li id="1">test1</li>
     <li id="2">test2</li>
     <li id="3">test3</li>
     <li id="4">test4</li>
</ul>

jQuery:

$("#tree li").draggable().droppable({
  element: '#tree',
  tolerance: 'around',
  aroundTop: '25%',
  aroundBottom: '25%',
  aroundLeft: 0,
  aroundRight: 0,
  drop: function(event,ui) {
    id = $(this).attr("id");
    alert(id);
  }
});

But the drop event is not firing. I don't get alert. Unable be find the mistake.

Here is Sample Fiddle and ui.overState fiddle

Answer 1

There doesn't seem to exist and around value for tolerance option, current valid values are fit intersect pointer touch, so if you just comment out your tolerance line, your fiddle works.

See working fiddle