如何在不丢失选择颜色的情况下禁用多选的拖动选择?

Posted

技术标签:

【中文标题】如何在不丢失选择颜色的情况下禁用多选的拖动选择?【英文标题】:How to disable the drag selection on multi select without losing the selection color? 【发布时间】:2018-08-16 10:22:45 【问题描述】:

我使用 select 标签创建了一个多选列表框,如下面的 Angular 5 代码所示。

<select multiple id="MySelect">
      <option>I am Option 1</option>
      <option>I am Option 2</option>
      <option>I am Option 3</option>
      <option>I am Option 4</option>
      <option>I am Option 5</option>
      <option>I am Option 6</option>
      <option>I am Option 7</option>
      <option>I am Option 8</option>
      <option>I am Option 9</option>
    </select>

现在,问题是我可以将鼠标拖到选择框上而无需实际选择任何选项,如下图所示。

从这张图片中,我们可以得出结论,在这个列表框中选择了所有前三个选项,但实际情况并非如此。为了移除这个拖动功能,我在 mousedown 和 mousemove 事件上添加了 preventDefault() 函数,如 here 所述。

添加 preventDefault() 解决了这个问题,但出现了另一个问题。问题是在列表框中选择一个或多个选项时,所选选项的背景颜色是灰色而不是默认的蓝色,当我在 Chrome 中检查它时,它显示:

select:-internal-list-box option:checked 
    background-color: -internal-inactive-list-box-selection;
    color: -internal-inactive-list-box-selection-text;

为了覆盖这个颜色,我使用了 !important 和颜色名称,但它没有用。

有人可以告诉我解决此问题的有效方法是什么,即禁用拖动选择并且所选项目的颜色为蓝色?万一,如果不可能,那么任何人都可以告诉我在 Angular 中使用一个替代组件来代替这个吗?

【问题讨论】:

灰色是特定于用户代理的,不要认为可以通过在样式表中覆盖它们来控制它。您可能必须使用自定义组件,例如material.angular.io/components/select/… @ThirueswaranRajagopalan,但这不是我想要的。我希望项目显示为列表组,而不是通过单击选择按钮启动的下拉列表 Angular 有很多选择插件,比如 ng-select 试试看... 也许您当前试用的 jsfiddle(包括 js 和 css)将帮助我们了解您的问题?目前你的 sn-p 只有初始的 html 元素。 在您的问题中,您说:“我可以将鼠标拖到选择框上而无需实际选择任何选项”。这对我来说听起来不正确。我认为,在拖动时,您实际上是在选择选项。您想要的是禁用该选择方法,并强制用户通过单击进行选择。我说的对吗? 【参考方案1】:

@DG 在完成所有场景之后,您需要将 CSS 添加到它自己的特定组件中,因为您没有向我提供任何代码, 我将 CSS 应用于 HTML 元素。

在我的解决方案中,我没有解释防止多重选择,因为您已经实现了它,我专注于您问题的第二部分。

CSS

select option:hover, 
select option:focus, 
select option:active, 
select option:checked

    background: linear-gradient(#f48024,#f48024);
    background-color: #f48024 !important; /* for Internet exolorer */

演示

select option:hover, 
select option:focus, 
select option:active, 
select option:checked

    background: linear-gradient(#f48024,#f48024);
    background-color: #f48024 !important; /* for Internet exolorer */
<select multiple id="MySelect">
    <option>I am Option 1</option>
    <option>I am Option 2</option>
    <option>I am Option 3</option>
    <option>I am Option 4</option>
    <option>I am Option 5</option>
    <option>I am Option 6</option>
    <option>I am Option 7</option>
    <option>I am Option 8</option>
    <option>I am Option 9</option>
</select>

【讨论】:

【参考方案2】:

只有在出现mousedownmousemove 操作后,您才需要跟踪mouseup。这只会在拖动时触发,因此也允许多选。

此处摘录:https://jsfiddle.net/omartanti/nm8d52ku/

var isDragging = false;
var select = $('#MySelect');

select.mousedown(function() 
    isDragging = false;
).mousemove(function() 
    isDragging = true;
).mouseup(function(e) 
    var wasDragging = isDragging;

    isDragging = false;
    if (wasDragging) 
        e.preventDefault();
        var selected = select.find('option:selected');
        var values = Array.from(selected).map((el) => el.value);
        select.val(values[values.length - 1]);
    
);

【讨论】:

谢谢,但是这个 sn-p 不能完美地为我工作,因为我需要多项选择功能,我不想禁用它。我只想禁用拖动功能 当您按下 cmd 按钮并单击不同的选项时,您仍然可以进行多项选择。

以上是关于如何在不丢失选择颜色的情况下禁用多选的拖动选择?的主要内容,如果未能解决你的问题,请参考以下文章

在不禁用字段的情况下限制选择 SELECT 选项

多选的快捷键是啥

求助:Web Dynpro for ABAP的Table如何得到被选中的多行

如何以编程方式在 select2 多选下拉列表中添加其他选择而不会丢失现有的选定项目

iOS 选择题之TableView单选与多选的处理

Vue实现多选、单选的样式切换