jQuery UI. DnD from sortable to droppable (out of the list) is not stable (doesn't drop every time)

Question

I'm trying to reuse "sortable" function in conjunction with "droppable". But when dragging from sortable drop event doesn't happen on each drop. Here is code example:

$(".sortable tbody").sortable({
    start: function(ev, ui) {
        console.log("start");
        var id = ui.item.children()[0].textContent;
        $(ui.item).data("id", id);
    },
    opacity: 0.5
});
$(".droppable").droppable({
    drop: function(ev, ui) {
        console.log("drop");
        this.value = $(ui.draggable).data("id");
    }
})

JSFiddle http://jsfiddle.net/27bom9sb/

What's wrong here and is there a better way to compound them?

UPDATE

After some additional testing it was found that dropping stability depends on draggable row lenth:

Here is example with short rows (stable): http://jsfiddle.net/usv496dm/1/

The same example but with longer row text (not stable): http://jsfiddle.net/usv496dm/2/

I have no idea why the stability depends on row length but now I think that this is wrong way to utilize sortable+droppable.

Answer 1

Use this script

Use tolerance property for the droppable.

Set tolerance property to "touch" or "pointer".

<script>
        $(function () {

            $(".sortable tbody").sortable({
                start: function (ev, ui) {
                    var id = ui.item.children()[0].textContent;
                    $(ui.item).data("id", id);
                }
            });

            $(".droppable").droppable({
                tolerance: "touch",
                drop: function (ev, ui) {
                    console.log("drop");
                    this.value = $(ui.draggable).data("id");
                }
            })
        });
    </script>

Worked for me. Hope this helps