Как перетаскивать только дочерние элементы внутри вложенных тегов ul с помощью jquery ui draggable

Question

My list is something like this
<div id="jqxTree">
    <ul>
        <li>Parent1
            <ul>
                child1
            </ul>
        </li>
        <li>Parent2
            <ul>
                child2
            </ul>
            <ul>
                child2.1
            </ul>
        </li>
    </ul>
</div>

когда я использую jquery, перетаскиваю его, перетаскивая весь список. Как перетащить только элементы child1,child2,child2.1. Для обобщения я хочу перетаскивать только элементы li внутри ul, который находится внутри..

Я попытался использовать функцию ниже, но при наведении мыши элементы li элементы скрыты

$('#jqxTree').delegate('li li', 'mouseover', function () {
    $(this).draggable({
        revert: true,
        revertDuration: 0
    });
}); 

Answer 1

Согласно странице jQuery API:

Начиная с jQuery 1.7, метод.delegate() был заменен методом.on().

Скрипка Демо

JQuery:

$(function () {
    $('#jqxTree').on('mouseenter mouseover', 'li > ul', function () {
        $(this).draggable({
            revert: true,
            revertDuration: 0
        });

    });
});

В CSS используйте > между родительскими и дочерними элементами.

Также у вас было li li вместо li ul,