html5sortable nested list specificity

Question

I'm trying to implement a drag & drop sort library (html5sortable): http://farhadi.ir/projects/html5sortable/ My trouble is that I have nested lists. Dragging a sub element moves the parent. Here's my list:

<ul id="list" class="sortable">
    <li draggable="true" data-url="index.php" data-auth="all"><span contenteditable="true">Home</span>
        <ul class="sortable">
            <li draggable="true" data-url="view.php?pg=about" data-auth="all"><span contenteditable="true">About Us</span></li>
            <li draggable="true" data-url="view.php?pg=contact" data-auth="all"><span contenteditable="true">Contact Us</span></li>
            <li draggable="true" data-url="view.php?pg=location" data-auth="all"><span contenteditable="true">Location &amp; Hours</span></li>
            <li draggable="true" data-url="news.php" data-auth="all"><span contenteditable="true">News</span></li>
        </ul>
    </li>
    <li draggable="true" data-url="cart.php" data-auth="all"><span contenteditable="true">Products</span>
        <ul class="sortable">
            <li draggable="true" data-url="catalog.php" data-auth="all"><span contenteditable="true">Download Print Catalog</span></li>
            <li draggable="true" data-url="contact.php?frm=catalog" data-auth="all"><span contenteditable="true">Request Print Catalog</span></li>
        </ul>
    </li>
    <li draggable="true" data-url="javascript:void(0)" data-auth="all"><span contenteditable="true">Services</span>
        <ul class="sortable">
            <li draggable="true" data-url="repair.php" data-auth="all"><span contenteditable="true">Repair</span></li>
        </ul>
    </li>
    <li draggable="true" data-url="cart.php" data-auth="acct"><span contenteditable="true">My Account</span>
        <ul class="sortable">
            <li draggable="true" data-url="ordStat.php" data-auth="ordstat"><span contenteditable="true">Order Status</span></li>
            <li draggable="true" data-url="ordHist.php" data-auth="prvord"><span contenteditable="true">Order History</span></li>
        </ul>
    </li>
</ul>

I believe I need stopPropagation, but not sure how to implement in this scenario because the library is handling selection based on child elements of .sortable class. The correct element (specific child element) is dragged, but the parent element is removed from the list temporarily and is also the one dropped. This section of code inside the library seems to work correctly:

items.children(options.handle).mousedown(function() {
    isHandle = true; // fires on both the span and the li, does not propagate to parent
}).mouseup(function() {
    isHandle = false;
});

Past that is where the problem lies. There was one instance of .find() in the library which I replaced with .children(), but this seems to have had no effect.

Answer 1

I needed to add stopPropagation to the dragstart event. This allows for infinitely nested lists to work properly.

items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
    e.stopPropagation(); // add this line to jquery.sortable.js
    .....
}

Then the lists need to all be "connected" when sortable() is called:

$('.sortable').sortable({ connectWith: '.sortable' });