Как перетащить элемент в выпадающий список с помощью jQuery UI sortable()?
Краткая версия : Как я могу перетащить Link 1
в один из выпадающих списков под Link 3
в этой демонстрации? http://jsfiddle.net/Gdadu/2/
EDIT: был поднят вопрос о том, что должно произойти, когда элемент перетаскивается на другой: должен ли он быть помещен влево/вправо или начать новое подменю? Для того, чтобы список был полностью сортируемым, должен быть какой-то способ перетаскивания элементов в несуществующие подменю, начиная новый выпадающий список 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/
Например, я хочу перетащить "Link 1" в подменю, но не могу этого сделать это потому, что подменю не появляется при перетаскивании, как будто :hover
игнорируется. Я не уверен, что проблема заключается в CSS или javascript. Что я могу с этим поделать?
Хорошая идея из комментариев:
Это, вероятно, сработает, но я не хочу, чтобы все меню расширялось. Это может быть много контента с большим количеством ссылок и 3 уровнями навигации, и, вероятно, будет перекрываться со всеми всплывающие окна / выпадающие окна (огромный беспорядок).Возможно, вы могли бы вызвать расширение всего, когда начинается перетаскивание
1 ответ:
Вот скрипка, которая показывает несколько моментов, которые могут помочь вам с вашей реализацией: http://jsfiddle.net/Gdadu/13/
Он далек от совершенства, и, как указано в комментарии, есть несколько логических проблем также с "сортировкой всего везде" :) вещи, не работающие здесь, сортируют вложенные li обратно на верхний уровень, сортируют таблицы на вложенных ul,... но я думаю, что они там нарисованы. Отличить сортировку от перетаскивания может быть одна вещь, необходимая с текущий статус jqueryui. Кроме того, я сокращаю ваше отличное css решение для подменю и сделал их javascript на основе, чтобы немного упростить вещи.
Но: вы можете поместить link1 внутрь link3 или вложенного ul link3;)