在下拉列表之间移动可拖动

Question

我正在制作一个导航菜单编辑界面，我有一个简单的多级菜单，鼠标悬停在展开的子菜单上。

<nav>
    <ul class="sortable1 connectedSortable">
        <li class="droppable"><a href="#">Menu Item 1</a></li>
        <li class="droppable"><a href="#">Menu Item 2</a>
            <ul class=" sortable2 connectedSortable">
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
        <li class="droppable"><a href="#">Menu Item 3</a></li>
        <li class="droppable"><a href="#">Menu Item 4</a>
            <ul class=" sortable2 connectedSortable">
                <li><a href="#">Submenu Item 4</a></li>
                <li><a href="#">Submenu Item 5</a></li>
                <li><a href="#">Submenu Item 6</a></li>
            </ul>
        </li>
        <li class="droppable"><a href="#">Menu Item 5</a></li>
    </ul>
</nav>​

我想要的功能是，当我将一个项目拖出子菜单时，子菜单

将隐藏，当我将其拖入具有子菜单的li时，它将打开。

$(".droppable").hover(
    function () {
        $("ul", this).slideDown(100);
    },
    function () {
        $("ul", this).slideUp(100);
    }
).droppable({
    tolerance: 'intersect',
    over: function(event, ui) {
        if($(ui.draggable).parent() !== $(this)){
            $(ui.draggable).appendTo($(this));
        }
        $("ul", this).slideDown(100);
    },
    out: function(event, ui) {
        if($(ui.draggable).parent() !== $(this)){
            $(ui.draggable).appendTo($(this));
        }
        $("ul", this).slideUp(100);
    }
});​

问题是，当我使用 jQuery UI 可排序over:方法时，当我使用子菜单将鼠标悬停在li上时，子菜单是打开的，但是，当我将项目移动到ul中时，它会关闭，因为移出顶部li会触发我设置为关闭菜单的out:方法。

将可拖动项移动到其父li外后，如何保持ul打开？

http://jsfiddle.net/6pgHa/6/

Answer 1

$(".sortable1, .sortable2").sortable({
    connectWith: ".connectedSortable",
    placeholder: "sortable-nav-items-placeholder"
}).disableSelection();
var dontClose = false;
$(".droppable").hover(
    function () {
        $("ul", this).slideDown(100);
    },
    function () {        
        $("ul", this).slideUp(100);
    }
).droppable({
    tolerance: 'intersect',
    activate: function(event, ui) {
        dontClose = !!(ui.draggable[0]);        
    },
    over: function(event, ui) {
        if($(ui.draggable).parent() !== $(this)){
            $(ui.draggable).appendTo($(this));
        }
        $("ul", this).slideDown(100);
    },
    out: function(event, ui) {
        if(dontClose) return;
        if($(ui.draggable).parent() !== $(this)){
            $(ui.draggable).appendTo($(this));
        }
        $("ul", this).slideUp(100);
    },
    drop : function(event, ui) {
        dontClose = false;        
    }
});​

好的，我已经用一些布尔标志修改了它们。现在没有时间测试，但它至少应该给你实验的方向。如果有任何问题，请随时提出，我会在几个小时后查看这是jsfiddle http://jsfiddle.net/6pgHa/18/