我在Preview-6中有一个拖放解决方案,该解决方案正在运行。升级到Preview-7后,我在@ondragover="event.preventDefault() statment
上遇到编译错误。
我试图将event.preventDefault()
放入js-function
中。它没有错误消息-但是drop事件没有启动/触发。
这是正在运行的Preview-6中的代码,但在Preview 7中给出了event.preventDefault()
上的编译错误。
<div class="container-fluid"
dropzone="move"
@ondragenter="@(e => OnContainerDragEnter(e))"
@ondragover="event.preventDefault()"
@ondragleave="@(e => OnContainerDragLeave(e))">
@foreach (var felt in feltList.OrderBy(p => p.DisplayOrder))
{
<div draggable="true" class="bm-3" title="Felt"
@ondragstart="@(e => OnItemDragStart(e, felt))"
@ondrop="@(async (e) => await OnContainerDrop(e, felt))">
<div class="form-group"
@onclick="@((e) => SelectEditField(felt.FeltDefinitionId))">
<EditCard felt="@felt"
fieldToEdit="@FieldToEdit"
skjemaId="@SkjemaId"
@OnClick="@(async () => await Delete(felt.FeltDefinitionId))">
</EditCard>
<ViewField felt="@felt"
fieldToEdit="@FieldToEdit">
</ViewField>
</div>
</div>
}
</div>
@code {
[Parameter] private string SkjemaId { get; set; }
private string _highlightDropTargetStyle;
private FeltDefinition itemToDropOn;
private FeltDefinition itemToDrag;
private FeltDefinition feltDefinition;
protected List<FeltDefinition> feltList;
protected Skjema skjema;
protected int FieldToEdit;
private void OnItemDragStart(UIDragEventArgs e, FeltDefinition dragItem)
{
itemToDrag = dragItem;
}
private void OnItemDragEnd(UIDragEventArgs e, FeltDefinition dragItem)
{
itemToDrag = dragItem;
}
private void OnContainerDragEnter(UIDragEventArgs e)
{
_highlightDropTargetStyle = "border:5px dashed salmon !important";
}
private void OnContainerDragLeave(UIDragEventArgs e)
{
_highlightDropTargetStyle = null;
}
private async Task OnContainerDrop(UIDragEventArgs e, FeltDefinition dropItem)
{
_highlightDropTargetStyle = null;
itemToDropOn = dropItem;
await ChangeDisplayNr();
}
}
这是相同的代码,但是我将@ondragover="event.preventDefault()"
更改为js脚本。
<div class="container-fluid"
dropzone="move"
@ondragenter="@(e => OnContainerDragEnter(e))"
@ondragover="@(async (e) => await preventDefault(e))"
@ondragleave="@(e => OnContainerDragLeave(e))">
@foreach (var felt in feltList.OrderBy(p => p.DisplayOrder))
{
<div draggable="true" class="bm-3" title="Felt"
@ondragstart="@(e => OnItemDragStart(e, felt))"
@ondrop="@(async (e) => await OnContainerDrop(e, felt))">
<div class="form-group"
@onclick="@((e) => SelectEditField(felt.FeltDefinitionId))">
<EditCard felt="@felt"
fieldToEdit="@FieldToEdit"
skjemaId="@SkjemaId"
@OnClick="@(async () => await Delete(felt.FeltDefinitionId))">
</EditCard>
<ViewField felt="@felt"
fieldToEdit="@FieldToEdit">
</ViewField>
</div>
</div>
}
</div>
@code {
[Parameter] private string SkjemaId { get; set; }
private string _highlightDropTargetStyle;
private FeltDefinition itemToDropOn;
private FeltDefinition itemToDrag;
private FeltDefinition feltDefinition;
protected List<FeltDefinition> feltList;
protected Skjema skjema;
protected int FieldToEdit;
private void OnItemDragStart(UIDragEventArgs e, FeltDefinition dragItem)
{
itemToDrag = dragItem;
}
private void OnItemDragEnd(UIDragEventArgs e, FeltDefinition dragItem)
{
itemToDrag = dragItem;
}
private void OnContainerDragEnter(UIDragEventArgs e)
{
_highlightDropTargetStyle = "border:5px dashed salmon !important";
}
private void OnContainerDragLeave(UIDragEventArgs e)
{
_highlightDropTargetStyle = null;
}
private async Task OnContainerDrop(UIDragEventArgs e, FeltDefinition dropItem)
{
_highlightDropTargetStyle = null;
itemToDropOn = dropItem;
await ChangeDisplayNr();
}
async Task preventDefault(UIDragEventArgs e)
{
await JsRuntime.InvokeAsync<string>("preventDefault", e);
}
}
和js-kode
preventDefault = function (e) {
e.preventDefault();
};