Как я могу перетащить элемент в выпадающий список, используя jQuery UI sortable ()? - PullRequest
Новая
       0

Как я могу перетащить элемент в выпадающий список, используя jQuery UI sortable ()?

5 голосов
/ 03 февраля 2012

Короткая версия : Как я могу перетащить Link 1 в одно из раскрывающихся меню под Link 3 в этой демонстрации? http://jsfiddle.net/Gdadu/2/

РЕДАКТИРОВАТЬ : Был поднят вопрос о том, что должно произойти, если элемент перетаскивается поверх другого: следует ли поместить его влево / вправо или открыть новое подменю? Для того, чтобы список был полностью сортируемым, должен быть какой-то способ поместить элементы в несуществующие подменю, начиная новый выпадающий список ul. Я мог бы вставить пустой ul в каждый элемент списка, у которого еще нет элемента для использования в качестве цели удаления, но проблема, описанная выше, все еще существует.

Это кажется намного сложнее, чем я первоначально думал, поэтому я прошу прощения за то, что еще не приложил больше усилий, поскольку я не рассматривал некоторые из этих проблем. Я готов принять ответ на поставленную проблему и об остальном переживаю позже.

У меня есть базовый выпадающий список навигации, который я хочу полностью отсортировать, используя пользовательский интерфейс jQuery. Любой элемент li должен иметь возможность перемещаться в любую позицию во всем списке. У меня проблемы с перетаскиванием элементов списка верхнего уровня в подменю, кажется, что :hover не срабатывает в раскрывающемся списке в режиме «перетаскивания», поэтому выпадающие списки не отображаются.

Пример HTML: 

<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>

Мой 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%;
}

Сортируемая инициализация: 

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

Демо: http://jsfiddle.net/Gdadu/2/

Например, я хочу перетащить «Ссылка 1» в подменю, но не могу этого сделать, потому что подменю не появляется при перетаскивании, как если бы :hover игнорировалось. Я не уверен, заключается ли проблема в CSS или javascript. Что я могу с этим поделать?

Хорошая идея из комментариев:

Возможно, вы можете активировать все, чтобы развернуться, когда начинается перетаскивание

Это, вероятно, сработает, но я не хочу, чтобы все меню расширялось. Это может быть много контента с множеством ссылок и 3 уровнями навигации, и, вероятно, оно будет перекрывать все всплывающие окна / выпадающие списки (огромный беспорядок).

1 Ответ

2 голосов
/ 04 февраля 2012

Вот скрипка, которая показывает несколько моментов, которые могут помочь вам в вашей реализации: http://jsfiddle.net/Gdadu/13/

Она далека от совершенства, и, как указано в комментарии, есть также несколько логических проблем.с "сортировкой всего и везде" :) Здесь не работает сортировка вложенного li на верхний уровень, сортировка по вложенному ul, ... но я думаю, что они там набросаны.Отличить сортировку от перетаскивания может быть одна вещь, необходимая с текущим статусом jqueryui.Также я сократил ваше превосходное решение CSS для подменю и сделал их на основе javascript, чтобы немного упростить вещи.

Но: вы можете удалить link1 внутри link3 или вложенного ul link3;)

...