Blazor Server无需JavaScript通过Razor实现拖拽多选按钮方案咨询

完全可以不使用JavaScript，仅通过Razor和C#实现该需求，你原有代码无法正常运行的核心原因如下：

• 给选中按钮加了disabled属性，被禁用的DOM元素不会响应任何鼠标交互事件，这是你只能选中第一个按钮的直接原因
• 没有全局变量记录鼠标是否处于按下拖拽的状态
• 错误绑定了mouseup事件，没有使用你需要的mouseover事件

完整修改后代码 #

@page "/"

<h1>Multiple selection example</h1>

<!-- 父容器监听全局鼠标事件，控制拖拽状态 -->
<div @onmousedown="() => isDragging = true"
     @onmouseup="() => isDragging = false"
     @onmouseleave="() => isDragging = false"
     style="display: flex; gap: 10px; padding: 20px 0;">
    @foreach (Button btn in buttonList)
    {
        <button 
            @onclick="(e) => SelectOne(e, btn)"
            @onmouseover="() => HandleMouseOver(btn)"
            style="padding: 5px 15px; @(btn.selected ? "background: #ccc; border-color: #999;": "")"
        >
            button id @btn.number
        </button>
    }
</div>

@code{
    // 标记当前是否处于拖拽选中状态
    private bool isDragging = false;

    public List<Button> buttonList = new() {
        new Button() { number = 1 },
        new Button() { number = 2 },
        new Button() { number = 3 },
        new Button() { number = 4 },
        new Button() { number = 5 }
    };

    public void SelectOne(MouseEventArgs e, Button btn)
    {
        // 保留原有的Ctrl+单击切换逻辑，不需要可以直接去掉Ctrl判断
        if (e.CtrlKey)
        {
            btn.selected = !btn.selected;
        }
        else
        {
            // 普通单击默认只选中当前按钮，不需要可以删除这部分
            foreach (var b in buttonList) b.selected = false;
            btn.selected = true;
        }
    }

    // 鼠标滑过按钮的处理逻辑
    public void HandleMouseOver(Button btn)
    {
        if (isDragging)
        {
            // 这里可以根据需求改成切换选中/直接设为选中
            btn.selected = true;
            // 如果要拖拽切换选中就用下面的代码
            // btn.selected = !btn.selected;
        }
    }

    public class Button
    {
        public int number { get; set; }
        public bool selected { get; set; } = false;
    }
}

逻辑说明 #

• 父容器监听鼠标按下、抬起、离开三个事件，全局控制拖拽状态，避免鼠标在容器外操作导致状态异常
• 用CSS样式替代disabled属性区分选中状态，保证按钮的鼠标事件可以正常触发
• 按钮绑定mouseover事件，只要处于拖拽状态就会自动修改选中状态，完全符合你预期的拖拽经过即选中的效果
• 保留了原有的单击选中逻辑，你可以根据自己的业务需求调整规则

内容的提问来源于stack exchange，提问作者SolarOsQuiere