Unable to Drop on an Empty List

[admin]

I am making a simple web app. At one part I have to drag among two different lists - One of which may be empty. I am not able to drop to an empty list.

I have tried:

dropOnEmpty = true
dropOnEmpty = "true"
dropOnEmpty = false
dropOnEmpty = "false"

and tried stuff as on:

<a href="https://stackoverflow.com/questions/2336285/how-do-i-move-an-item-to-an-empty-list-using-jquery">How do I move an item to an empty list using jquery?</a>

<a href="http://jqueryui.com/sortable/#empty-lists" rel="nofollow noreferrer">JQuery API</a>

<a href="http://rolleys.wordpress.com/2010/05/18/cant-get-jquery-sortable-to-drop-on-to-empty-lists/#" rel="nofollow noreferrer">Rollys Wordpress</a>

<a href="https://stackoverflow.com/questions/18163709/jquery-ui-drop-on-empty-container-list-not-working">jQuery UI drop on empty container/list not working</a>

Hidden

<li>

elements so that lists are not empty at all.

but nothing worked.

This is the HTML part:

<ul><li>Present</li></ul>
<ul id="present" class="sortable"></ul>   //First List
<ul><li>Future</li></ul>
<ul id="future" class="sortable"><li></li></ul>  //Second List

This is the jQuery function:

$("ul.sortable").sortable({
axis: 'y',
        cancel: "div.cal",
        connectWith: "ul",
        dropOnEmpty: true,
        update: function(event, ui) {
            if (ui.sender === null) {
                var goalsNames = '';
                $(".sortable li").each(function() {
                    if (goalsNames === '') {
                        goalsNames = '["' + $(this).text();
                    } else {
                        goalsNames += '","' + $(this).text();
                    }
                });
                goalsNames += '"]';
                localStorage.setItem("goalsNames", goalsNames);
                var goalsDetails = localStorage.getItem("goalsDetails");
                console.log(goalsDetails);
                var goalsDetailsObj = JSON.parse(goalsDetails);
                $("#present li").each(function() {
                    console.log(JSON.stringify(goalsDetailsObj[$(this).text()]));
                    console.log(goalsDetailsObj[$(this).text()].active);
                    goalsDetailsObj[$(this).text()].active = "present";
                });
                $("#future li").each(function() {
                    goalsDetailsObj[$(this).text()].active = "future";
                });
                localStorage.setItem("goalsDetails", JSON.stringify(goalsDetailsObj));
            }
        }
}).disableSelection();
});