Geek Answers Handbook

How to drag an item into a dropdown using jQuery UI sortable ()?

Short version . How to drag Link 1into one of the drop-down menus under Link 3in this demo? http://jsfiddle.net/Gdadu/2/

EDIT : the problem was what should happen when an item is dragged over another: should it be placed left / right or should a new submenu be started? For the list to be completely sortable, you must somehow remove the items in non-existent submenus, starting with the drop-down list ul. I could insert an empty element ulinto each element of the list that does not yet have the ability to appear as a drag target, but the problem above still exists.

This seems a lot more complicated than I initially thought, so I apologize for not putting more effort into this, as I did not address some of these issues. I am ready to accept the answer to the stated problem and worry about the rest later.

I have a basic navigation dropdown that I want to completely sort using jQuery UI. Any element lishould be able to move to any position in the entire list. I'm having problems dragging and dropping top-level list items into a submenu, it seems that it :hoverdoesn't start in the drop-down list in drag-and-drop mode, so drop-down lists are not displayed.

HTML example:

<ul class="dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a>
                 <ul>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

My CSS:

.dropdown,
.dropdown li,
.dropdown ul {
    list-style:none;
    margin:0;
    padding:0;
}
.dropdown {
    position:relative;
    display:block;
    z-index:10000;
}
.dropdown ul {
    position:absolute;
    top:100%;
    width:100%;
    visibility:hidden;
    display:none;
    z-index:900;
}
.dropdown ul ul {
    top:0;
    left:100%;
}
.dropdown li {
    position:relative;
    float:left;
}
.dropdown li:hover{
    z-index:910;
    cursor:default;
}
.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {
    visibility:visible;
    display:block;
}
.dropdown a {
    text-decoration:none;
    display:block;
    padding:.5em 2em;
    background:#cde;
    border:1px solid #ccc;
}
.dropdown ul li {
    width:100%;
}

Initialization Sort:

$('.dropdown').sortable({
    items: 'li'
});

Demo: http://jsfiddle.net/Gdadu/2/

, " 1" , , , :hover . , CSS javascript. ?

:

, , , .

, , , . , , / ( ).

+5
1

, , : http://jsfiddle.net/Gdadu/13/

, , , , " ":). li , ul,... , . , jqueryui. , css javascript, .

: 1 link3 link3 ul;)

+2

More articles:


All Articles