Selectize.js 多选列表选项下拉列表在单击下拉列表的滚动条时关闭答案

【问题标题】：Selectize.js multi-select-list option drop-down list closes when the drop-down list's scrollbar is clickedSelectize.js 多选列表选项下拉列表在单击下拉列表的滚动条时关闭
【发布时间】：2019-01-27 03:38:05
【问题描述】：

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

当我尝试单击选项下拉列表滚动条中的旋钮以拖动列表（以便我可以看到其他选项）时，下拉列表关闭。

我需要设置什么Selectize.js 配置设置以允许我滚动选项下拉列表？

【问题讨论】：

为提高可读性而对措辞进行了细微更改
根据您的codepen，您可能已经解决了这个问题，除非我有误解。
benvc，原来问题是selectize中的click-handlers和我正在使用它的页面之间的冲突。CodePen工作的原因是没有其他东西在CodePen 除了选定的列表。在我的网络应用程序中，问题仍然存在。你对我可以找到什么点击处理程序从我的选择列表中“窃取”焦点有什么建议吗？我试过在 Chrome 中使用全局鼠标点击事件工具，但没有发现问题。
不幸的是，这听起来像是卷起袖子开始挖掘某种东西。如果您能够隔离一小部分无法完全修复的违规代码，请随时发布另一个问题。
谢谢，你说的太对了。我发现selectize和jQuery-UI Library Draggable组件之间存在冲突。可拖动组件分配给一个 Div 元素，该元素包含我的弹出表单中的字段，包括选定列表。注释掉可拖动的分配允许选定的列表工作，但表单不再是可移动的。在作业中，我使用句柄功能将可拖动功能限制在表单的标题区域 $( '#songData' ).draggable( { handle : '#songDataTitle' } )，它不包含选定列表。跨度>

标签： drop-down-menu selectize.js

【解决方案1】：

发现问题！

症状：原来selectized.js插件和jQuery-UI Draggability组件有冲突。

虽然 CodePen 演示工作正常，但问题仍然出现在我的网络应用程序中。简单的 CodePen 演示和我的 web 应用程序的许多不同之处之一是在 web 应用程序中使用了 jQuery-UI Draggability 组件。

证明： 将可拖动性组件附加到包含选定列表的弹出表单的 div 上，当单击/拖动列表的滚动条时，焦点会从选择列表中窃取.注释掉可拖动的赋值可以让选择列表正常工作，包括滚动条。

奇怪的是，我正在使用可拖动组件的句柄功能来限制拖动到弹出表单顶部的标题区域，它没有包含选择列表，我认为这会导致可拖动的单击/拖动仅影响标题区域，但显然情况并非如此。在未注释掉可拖动分配的情况下，拖动功能仅在使用标题区域时发生，但选择列表的滚动条在单击时不起作用。但是，注释掉分配会导致列表滚动条按预期工作。

解决方案： 除了找到另一种使表单可拖动的方法外，我还想坚持使用 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 -->

【讨论】：