如何使用jquery ui可拖动仅在嵌套的ul标签内拖动子元素

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 draggable 时，它​​可以拖动整个列表。如何只拖动 child1、child2、child2.1 元素。概括地说，我只想在 li 内部的 ul 中拖动 li 元素。

我尝试使用下面的函数，但鼠标悬停在 li 的元素上时，元素被隐藏了

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

Answer 1

根据 jQuery API 页面：

从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。

Fiddle Demo

jQuery:

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

    });
});

在 CSS 中，在父元素和子元素之间使用>。

你还有li li而不是li ul。