Mudblazor - 在拖放区域内单击

Posted 2023-03-27

【中文标题】Mudblazor - 在拖放区域内单击

【英文标题】：Mudblazor - Click inside the zone of the drag and drop

【发布时间】：2021-11-25 03:51:24

【问题描述】：

我正在为 Blazor WebAssembly 使用一个名为 Mudblazor 的 CSS 框架。

我在拖放区域内添加了一个按钮，该按钮将删除已上传的每个图像。但是当我点击删除按钮时，我只会启动文件管理器。

问题是实际拖放区域设置为 position: absolute none。

有没有办法解决这个问题？

这个样子的例子。无法单击删除按钮。当我尝试点击删除按钮时会出现文件管理器。

CSS：

 .drag-drop-zone 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    /*        min-height: 400px;
*/ border: 3px dotted;
    min-height: 100px;
    border: 2px dashed rgb(0, 135, 247);


.drag-drop-input 
    position: absolute;
    width: 100%;
    height: 90%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;


.drag-enter 
    box-shadow: var(--mud-elevation-10);


.list 
    padding: 2em;
    min-width: 100%;

剃须刀

<MudList Style="padding:2em;width:100%;" Dense="true">
@foreach (var file in fileNames)

    <MudListItem @key="@file">
        <MudChip Color="Color.Dark"
                 Style="width:60px; overflow:hidden;"
                 Text="@(file.Split(".").Last())" />
        @file <MudButton Color="Color.Error" OnClick="() => Remove(file)" Style="position:unset;">Remove</MudButton>
    </MudListItem>

删除方法：

    void Remove(string file)

    var ret = fileNames.FirstOrDefault(x => x.Contains(file));
    if (ret != null)
    
        fileNames.Remove(ret);
    

【问题讨论】：

忘记提及 Mudblazor 的链接：mudblazor.com

【参考方案1】：

我在使用 MudBlazor 主页的示例代码时遇到了同样的问题 https://mudblazor.com/components/fileupload#drag-and-drop-example

正如 Memetican 所说，.drag-drop-input 似乎覆盖了其他内容。我不知道我在做什么，所以我不会给出解释，但position: absolute; 部分引起了我的兴趣。阅读它here 导致我将其从absolute 更改为static。连同示例代码中的一些其他细微更改，我有以下似乎正在工作的内容

@page "/tools/csvimport"
@inject ISnackbar Snackbar
<style>
    .drag-drop-zone 
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .4s;
        height: 100%;
    

    .drag-drop-input 
        position: static;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    

    .drag-enter 
        box-shadow: var(--mud-elevation-10);
    

    .list 
        padding: 2em;
        min-width: 100%;
    
</style>

<MudGrid Justify="Justify.Center" Spacing="4">

    <MudItem xs="12" sm="12" md="6">
        <MudPaper @ondragenter="@(()=>_dragEnterStyle="drag-enter")"
                  @ondragleave="@(()=>_dragEnterStyle=null)"
                  @ondragend="@(()=>_dragEnterStyle=null)"
                  Class=@("drag-drop-zone "+ _dragEnterStyle)
                  MinHeight="200px">

            <InputFile OnChange="OnInputFileChanged" class="drag-drop-input" />

            @if (file is null)
            
                <MudText Typo="Typo.h6">Drag file here, or click to browse your files</MudText>
            
            else
            
                <MudChip Color="Color.Info">@file.Name</MudChip>
            


        </MudPaper>
        <MudGrid Justify="Justify.Center" Spacing="4" Class="mt-4">
            <MudItem>
                <MudButton OnClick="Upload" Disabled="@(file is null)" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton>
            </MudItem>
            <MudItem>
                <MudButton OnClick="@(() => file = null)" Disabled="@(file is null)" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton>
            </MudItem>
        </MudGrid>
    </MudItem>

</MudGrid>
@code 
    string _dragEnterStyle;
    IBrowserFile file;

    void OnInputFileChanged(InputFileChangeEventArgs e)
    
        file = e.File;
    
    void Upload()
    
        //Upload the files here
        Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
        Snackbar.Add("TODO: Upload " + file.Name, Severity.Normal);
    

【参考方案2】：

我认为您遗漏了放置目标的代码，因为您的大多数 CSS 样式都没有被引用。

但是，您的放置目标似乎位于文件列表的顶部。请注意 CSS 中的 z-index...

.drag-drop-input 
    position: absolute;
    width: 100%;
    height: 90%;
    opacity: 0;
    cursor: pointer;
    z-index: 2; /* <== here */

这将创建一个玻璃窗格类型的效果。您可以看到您的文件列表和删除按钮，因为您有 opacity: 0; - 但是您无法与它们交互，因为您的放置目标在 z 顺序中位于它们上方。

将 html 页面想象成一堆重叠的矩形。鼠标交互只命中最顶层。

解决方案 1：（可行） 删除该 z-index，或将文件列表和按钮的 z-index 设置为高于放置目标。这应该可行，但是如果用户尝试将文件直接拖放到您的文件列表或删除按钮上，它可能会在某些浏览器上产生不良行为。

解决方案 2：（推荐）将文件列表和 删除 按钮移到放置目标之外。设计您的放置目标以完成其一项功能 - 接受文件放置和调用文件上传操作的鼠标单击。