Drop down menu 单击下拉列表的滚动条时，Selectize.js多选列表选项下拉列表关闭

我有一个有很多选项的列表，这些选项足够长，可以在打开时显示滚动条

当我试图单击选项下拉列表滚动条中的旋钮以拖动列表以便查看其他选项时，下拉列表关闭

我需要设置什么样的Selectize.js配置设置才能滚动选项下拉列表？

发现问题

症状：selectized.js插件和jQuery UI Draggability组件之间存在冲突

虽然CodePen演示运行良好，但问题仍然出现在我的web应用程序中。简单代码笔演示和我的web应用的许多不同之处之一是在web应用中使用了jQuery UI Draggability组件

证明：通过将draggability组件附加到包含selectized列表的弹出表单的div中，当单击/拖动列表的滚动条时，焦点将从selectize列表中窃取。注释掉可拖动的分配允许selectize列表正常工作，包括滚动条

奇怪的是，我正在使用可拖动组件的句柄功能将拖动限制在弹出表单顶部的标题区域，该区域不包含selectize列表，我认为这会导致可拖动的单击/拖动只影响标题区域，但显然不是这样。如果未注释掉可拖动的分配，则拖动功能仅在使用标题区域时发生，但单击selectize列表的滚动条时不起作用。但是，注释掉分配会导致列表滚动条按预期工作

解决方案：除了找到另一种使表单可拖动的方法外，我还想继续使用jQueryUI库，因为我将它用于其他功能。我发现不是在表单上创建可拖动组件，而是需要在鼠标移动到表单标题上时创建组件，并在鼠标离开表单标题时删除组件。我试着简单地启用和禁用组件，但没有成功

以下是指向代码笔的链接：

---

可读性方面的细微措辞更改基于您的，看起来您可能已经解决了此问题，除非我有误解。benvc，问题在于selectize中的单击处理程序与我使用它的页面之间存在冲突。代码笔工作的原因是，除了已选择的列表之外，代码笔中没有其他内容。在我的web应用程序中，问题仍然存在。你对我能找到从我的选择列表中“窃取”焦点的点击处理程序有什么建议吗？我曾尝试在Chrome中使用全局鼠标点击事件工具，但没有发现问题。不幸的是，这听起来像是一个卷起袖子开始挖掘的工具。如果你能分离出一小段你不能完全修复的令人不快的代码，请随意发布另一个问题。谢谢，你说得对。我发现selectize和jQuery UI库可拖动组件之间存在冲突。可拖动组件被分配给一个Div元素，该元素包含我的弹出表单中的字段，包括已选择的列表。注释掉可拖动的作业可以使选定的列表工作，但表单不再是可移动的。在赋值中，我使用handle特性将draggable函数限制在表单的标题区域$'songData'.draggable{handle:'songDataTitle'}，它不包含所选列表。

<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 -->