How to resolve conflict between jquery ui sortable and jquery custom content scroller?

Question

PHP

Я столкнулся с проблемой использования jquery custom content scroller в паре с jquery ui sortable. У меня есть список с перетаскиваемыми элементами, которые можно двигать или удалять, после чего они выстраиваются заново из оставшихся элементов. Моя задача была повесить на этот список кастомный скролл, так как список может содержать большое количество элементов.

При загрузке страницы все в порядке. Проблемы начинаются, когда пытаешься сдвинуть один из элементов списка (<li>). Происходит какая-то несостыковка между библиотеками, после чего кастомный скролл пропадает, появляется дефолтный скролбар, а сам список получает дополнительную ширину и уходит в футер, так как ломается лэйаут.

I also noticed that when you try to drag one of the list items, the structure of the DOM tree related to the scroll changes. div.mCustomScrollBoxbecomes the neighbor of all the elements in the list, instead of being their parent.

Before

<ul class="subjectsMenu mCustomScrollbar _mCS_1 mCS-dir-rtl">
  <div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0">
    <div id="mCSB_1_container" class="mCSB_container ui-sortable" style="position:relative; top:0; left:0;" dir="rtl">
      <li class="ui-sortable-handle">...</li>
      <li class="ui-sortable-handle">...</li>
      <li class="ui-sortable-handle">...</li>
      <li class="ui-sortable-handle">...</li>
      <li class="ui-sortable-handle">...</li>
      <li class="ui-sortable-handle">...</li>
      <li class="ui-sortable-handle">...</li>
    </div>
  </div>
</ul>

After

<ul class="subjectsMenu mCustomScrollbar _mCS_1 mCS-dir-rtl mCS_no_scrollbar"><div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0">
  <div id="mCSB_1_container" class="mCSB_container ui-sortable mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="rtl"></div>
    <div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_vertical" style="display: none;">
      <div class="mCSB_draggerContainer">
        <div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 40px; display: block; height: 335px; max-height: 740px; top: 0px;" oncontextmenu="return false;">
          <div class="mCSB_dragger_bar" style="line-height: 40px;"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
    </div>
  </div>
  <li class="ui-sortable-handle">...</li>
  <li class="ui-sortable-handle">...</li>
  <li class="ui-sortable-handle">...</li>
  <li class="ui-sortable-handle">...</li>
  <li class="ui-sortable-handle">...</li>
</ul>

Answer 1

$txt = menu();
What's next? Well, you put the menu into a variable. Then what happens?

Answer 2

You just don't understand how return works
php.net/manual/ru/function.return.php

function getMenu() {
   return 'getMenu';
}

function printMenu() {
  echo 'printMenu';
}

$a = getMenu();
echo $a; // можно сразу вывести: echo getMenu();
printMenu();

Answer 3

It's simple:
return returns.
echo outputs.
You need to echo out what return returned.

Answer 4

Выбросьте уже этот jQuery UI, он устарел безнадежно.
Есть альтернатива - маленькая, легкая, не зависит от фреймворков, по API практически полностью совместима с jQuery UI: https://github.com/voidberg/html5sortable