Question

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

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

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

Answer 1

发现问题！

症状：事实证明，selectized.js插件与jQuery-UI Draggability组件之间存在冲突。

虽然CodePen演示可以正常运行，但该问题仍然出现在我的Web应用程序中。简单的CodePen演示和我的Web应用程序的众多差异之一是在Web应用程序中使用jQuery-UI Draggability组件。

证明：将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 -->

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

1 个答案: