0
352
ViewsMudblazor - Haga clic dentro de la zona de arrastrar y soltar
Estoy usando un marco CSS para Blazor WebAssembly llamado Mudblazor.
He agregado un botón dentro de la zona de arrastrar y soltar que eliminará cada imagen que se haya cargado. Pero cuando hago clic en el botón Eliminar, solo obtengo el administrador de archivos.
El problema es que la zona real de arrastrar y soltar está configurada en la posición: ninguna absoluta.
¿Hay una manera de resolver esto?
Ejemplo de cómo se ve esto. No es posible hacer clic en el botón Eliminar. El administrador de archivos aparece cuando trato de hacer clic en el botón Eliminar.
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%; }Maquinilla de afeitar
<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>}Eliminar método:
void Remove(string file) { var ret = fileNames.FirstOrDefault(x => x.Contains(file)); if (ret != null) { fileNames.Remove(ret); } }2 answers
Answer question0
Creo que omitió el código para su destino de colocación, ya que la mayoría de sus estilos CSS no están referenciados.
Sin embargo, parece que su destino para soltar está colocado en la parte superior de su lista de archivos. Tenga en cuenta el z-index en su CSS...
.drag-drop-input { position: absolute; width: 100%; height: 90%; opacity: 0; cursor: pointer; z-index: 2; /* <== here */ } Esto crearía un efecto tipo panel de vidrio. Puedes ver tu lista de archivos y eliminar botones, porque tienes opacity: 0; - sin embargo, no puede interactuar con ellos porque su destino de caída está por encima de ellos en el orden z.
Piense en una página HTML como un montón de rectángulos superpuestos. Las interacciones del mouse afectan solo a la capa superior.
Solución 1: (factible) elimine ese índice z, o configure el índice z para su lista de archivos y sus botones más altos que el destino de colocación. Esto debería funcionar, sin embargo, puede crear comportamientos no deseados en algunos navegadores, si el usuario intenta colocar un archivo directamente en su lista de archivos o en sus botones de eliminación.
Solución 2: (recomendado) Mueva su lista de archivos y elimine los botones fuera del destino de colocación. Diseñe su destino de colocación para que cumpla su única función: aceptar caídas de archivos y clics del mouse que invocan la acción de carga de archivos.
0
Tuve el mismo problema al usar el código de muestra de la página de inicio de MudBlazor https://mudblazor.com/components/fileupload#drag-and-drop-example
Como afirma Memetican, parecía que la .drag-drop-input se superponía al otro contenido. No sé lo que estoy haciendo, así que no daré una explicación sino la position: absolute; parte me llamó la atención. Leer sobre esto aquí me llevó a cambiarlo de absolute a static . Junto con algunos otros cambios menores del código de muestra, tengo lo siguiente que parece estar funcionando
@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); } }