Сортируемый аккордеон jQuery UI + Bootstrap 3 не работает должным образом

Я хотел создать аккордеонное меню с возможностью сортировки перетаскиванием, я мог создать его с помощью пользовательского интерфейса bootstrap 3 + jQuery, но проблема в том, что пользовательский интерфейс jQuery конфликтует с общей работой аккордеона начальной загрузки. Я очень конкретно использую Bootstrap Accordion, но мне нужно решить проблемы, создаваемые пользовательским интерфейсом jQuery.

  • Иногда при сортировке пропадает одна вкладка
  • Когда одна вкладка открыта и отсортирована, закрытие происходит только при нажатии на другую вкладку.
  • Неправильная организация порядка сортировки при открытых вкладках.

Я объединил его в plnkr

$(function(){
   $( "#accordion" ).accordion().sortable({
      connectWith: "#dropBag"
   }); 

   $( "#dropBag" ).sortable({
      connectWith: "#accordion"
   }); 
});

http://plnkr.co/edit/LpQuO9nfB4d5Nwhaj6my?p=preview

Пожалуйста помоги.


javascript html accordion twitter-bootstrap-3 jquery-ui
person cs1193    schedule 30.07.2014    source источник
comment
Что делает функция аккордеон()? Я заменил его на свернуть() - разве это не то, что вы хотите?   -  person Ilya Luzyanin    schedule 30.07.2014
comment
Jquery ui Sortable предназначен для работы со списками, почему вы думаете, что он будет работать с аккордеоном Boostrap? Вот поток SO с альтернативным вариантом, хотя необходимо добавить сворачивающийся бит: bootstrap" title="отзывчивый сортируемый список, поддерживающий перетаскивание для начальной загрузки"> stackoverflow.com/questions/20424477/   -  person NicoFerna    schedule 30.07.2014
comment
@IlyaLuzyanin, спасибо, сработала функция roll().   -  person cs1193    schedule 30.07.2014
comment
@NicoFerna Я не хочу использовать что-то вроде jquery.sortable.js для одной функции, в моем проекте есть и другие способы использования jquery-ui, поэтому я хотел закончить на этом. Я сожалею об этом.   -  person cs1193    schedule 30.07.2014
comment
Ну, это не решает вашу проблему с сортировкой - я не мог понять, что вы хотите получить в результате?   -  person Ilya Luzyanin    schedule 30.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

У вас есть небольшая ошибка в вашем скрипте — аккордеон () следует заменить на свернуть () (см. параграф «Свернуть» в документации. Перепишите код следующим образом:

$(function(){
   $( "#accordion" ).collapse().sortable({
      connectWith: "#dropBag"
   }); 

   $( "#dropBag" ).sortable({
      connectWith: "#accordion"
   }); 
});

Кроме того, в конце вашей разметки (dropBag) есть незакрытый div. Я могу обновить свой ответ, как только пойму проблему сортировки, которая у вас есть.

person Ilya Luzyanin    schedule 30.07.2014