jQuery UI + сортируем акордеон Bootstrap 3 не работи правилно

Исках да създам акордеонно меню с възможности за сортиране чрез плъзгане и пускане, можех да го изградя с помощта на bootstrap 3 + jQuery UI, но проблемът е, че jQuery UI е в конфликт с общата работа на bootstrap акордеон. Много съм специфичен относно използването на Bootstrap Accordion, но трябва да разреша проблемите, създавани от jQuery UI.

  • Понякога при сортиране някой от разделите изчезва
  • Когато един раздел е отворен и сортиран, затварянето се извършва само когато се щракне върху другия раздел.
  • Неправилно подреждане на реда на сортиране, когато разделите са отворени.

Обединил съм го в 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
Какво прави функцията accordion()? Замених го с collapse() - не е ли това, което искате?   -  person Ilya Luzyanin    schedule 30.07.2014
comment
Sortable на Jquery ui е предназначен да работи със списъци, какво ви кара да мислите, че ще работи с акордеон Boostrap? Ето SO нишка с алтернативна опция, въпреки че ще трябва да се добави свиващият бит: stackoverflow.com/questions/20424477/   -  person NicoFerna    schedule 30.07.2014
comment
@IlyaLuzyanin благодаря, че collapse() работи.   -  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

Имате малка грешка във вашия скрипт - accordion() трябва да бъде заменен с collapse() (вижте параграфа за свиване в документацията. Пренапишете кода си, както следва:

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

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

Освен това има незатворен div в края на вашето маркиране (dropBag). Мога да актуализирам отговора си веднага щом разбера проблема със сортирането, който имате.

person Ilya Luzyanin    schedule 30.07.2014