0

私はナビゲーション メニュー編集インターフェイスを作成しています。サブメニューを展開する上にマウスを置いたシンプルなマルチレベル メニューがあります。

<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:メニューを閉じるために設定したメソッド。

ulドラッグ可能なものを親の外に移動した後、開いたままにするにはどうすればよいliですか?

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

4

1 に答える 1

0 
$(".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;        
    }
});​

OK私はそれらをブールフラグで変更しました。今すぐテストする時間はありませんが、少なくとも実験の方向性がわかるはずです。ご不明な点がございましたら、お気軽にお問い合わせください。数時間後に確認します。これがjsfiddleですhttp://jsfiddle.net/6pgHa/18/

于 2012-11-30T14:27:02.783 に答える