Kendo UI sortable within a sortable

I'm trying to get the following to work:

    <div id="playlist">
        <div id="playlist-title"><span>My Playlist</span></div>
        <ul id="sortable-basic">
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">Papercut <span>3:04</span></li>
                <li class="sortable">One Step Closer <span>2:35</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">With You <span>3:23</span></li>
                <li class="sortable">Points of Authority <span>3:20</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">Crawling <span>3:29</span></li>
                <li class="sortable">Runaway <span>3:03</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">By Myself <span>3:09</span></li>
                <li class="sortable">In the End <span>3:36</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">A Place for My Head <span>3:04</span></li>
                <li class="sortable">Forgotten <span>3:14</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">Cure for the Itch <span>2:37</span></li>
                <li class="sortable">Pushing Me Away <span>3:11</span></li>
            </div>
        </ul>
    </div>
    <script>
            $(document).ready(function() {
                $("#sortable-basic").kendoSortable({
                    hint:function(element) {
                        return element.clone().addClass("hint");
                    },
                    placeholder:function(element) {
                        return element.clone().addClass("placeholder").text("drop here");
                    },
                    cursorOffset: {
                        top: -10,
                        left: -230
                    },
                    items: ".sortable, .sortable-div"
                });
            });
    </script>

So the plan is the following: You need to be able to drag the div's up and down other div's. This works fine. But you also need to be able to drag a single item around, in and out the div. This is the part I cannot figure out. When I click an item it selects the div anyways. For the life of me i cannot seem to figure this out.

from Kendo UI sortable within a sortable