Раскрывающийся список с несколькими вариантами выбора в Selectize.js закрывается при нажатии на полосу прокрутки раскрывающегося списка

Обнаружена проблема!

Симптом: Оказывается, существует конфликт между подключаемым модулем selectized.js и компонентом перетаскивания jQuery-UI.

Хотя демонстрация CodePen работает нормально, проблема все еще возникает в моем веб-приложении. Одним из многих отличий простой демонстрации CodePen от моего веб-приложения является использование компонента jQuery-UI Draggability в веб-приложении.

Доказательство: С компонентом перетаскивания, прикрепленным к div, который включает всплывающую форму, которая включает выделенный список, фокус крадется из списка выбора при щелчке / перетаскивании полосы прокрутки списка. Комментирование - перетаскиваемое назначение позволяет списку выбора работать нормально, включая полосу прокрутки.

Странно то, что я использую функцию дескриптора перетаскиваемого компонента, чтобы ограничить перетаскивание в область заголовка в верхней части всплывающей формы, которая не включает список выбора, который, как я думал, вызвал бы перетаскиваемый щелчок / drag, чтобы воздействовать только на область заголовка, но очевидно, что это не так. Если перетаскиваемое назначение не закомментировано, функция перетаскивания выполняется только с использованием области заголовка, но полоса прокрутки списка выбора не работает, когда по ней щелкают. Однако комментирование назначения заставляет полосу прокрутки списка работать должным образом.

Решение: Помимо поиска другого способа сделать форму перетаскиваемой, я хотел придерживаться библиотеки jQuery-UI, потому что я использую ее для других функций. Я обнаружил, что вместо создания перетаскиваемого компонента в форме мне нужно было создать компонент, когда указатель мыши перемещается по заголовку формы, и удалить компонент, когда указатель мыши отодвигается от заголовка формы. Я пробовал просто включать и отключать компонент, но это не сработало.

Вот ссылка на CodePen: https://codepen.io/howardb1/pen/aazWwY.

<div id = "songData"
     style = "position: absolute; left: 626px; top: 8px; z-index: 99;
            width: 672px; min-height: 423px; max-height: 635px;
            padding: 0 28px 28px 28px; border: 5px double black;
            background-color: white; color: black;">
  <!-- **********************************************************************

       Prevent the songData 'form' area dragging when the mouse isn't over
       the songData Title.

       This prevents a problem with the selectize drop-down list that causes
       the list to loose focus when the options scrollbar is clicked.

       ****************************************************************** -->

  <div id = "songDataTitle"
       style = "margin-left: -28px; padding: 28px; height: 20px; width: 100%;
              text-align: center; font-size: 20px; font-weight: bold;
              cursor: move;"
       onmouseover = "songData_dragable( true );"
       onmouseout = "songData_dragable( false );">
    Song Information Form
  </div>

  <script>
    function songData_dragable( mode ) {

      if ( !mode  )

        $( '#songData' ).draggable( 'destroy' );

      else

        $( '#songData' ).draggable( { handle : '#songDataTitle' } );

      // End of if ( !mode  ) ... else ...

    } // End of songData_dragable( mode ) function.
  </script>

<!-- rest of the web-page goes here -->