blazor - 拖放 setDragImage答案

【问题标题】：blazor - drag drop setDragImageblazor - 拖放 setDragImage
【发布时间】：2022-12-09 20:49:17
【问题描述】：

我们如何更改在 blazor 中拖动的对象？我找到了 html5/js 的 following example。但是我不知道如何在没有完整的 js 中断的情况下在 blazor 中执行此操作。 DragEventArgs 对象似乎缺少这个 setDragImage() 函数。

来自示例的 HTML/JS 代码：

<div id="drag-coveredup" class="dragdemo" draggable="true">drag me</div>
<div id="coverup"></div>
<style>
#coverup {
    background: white;
    width: 170px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
</style>
<script>
document.getElementById("drag-coveredup").addEventListener("dragstart", function(e) {
    var crt = this.cloneNode(true);
    crt.style.backgroundColor = "red";
    crt.style.position = "absolute"; crt.style.top = "0px"; crt.style.right = "0px";
    document.body.appendChild(crt);
    e.dataTransfer.setDragImage(crt, 0, 0);
}, false);
</script>

编辑：Microsoft refers to custom events

Edit2：我知道如何创建自定义事件，但如何从该自定义事件中调用函数.setDragImage(crt, 0, 0)？我只能找到具有属性的示例。

我创建了以下 customEvent.js 文件

function CustomDragEventCreator(event) {
    return {
        ...parseMouseEvent(event),
        dataTransfer: event.dataTransfer ? {
            dropEffect: event.dataTransfer.dropEffect,
            effectAllowed: event.dataTransfer.effectAllowed,
            files: Array.from(event.dataTransfer.files).map(f => f.name),
            items: Array.from(event.dataTransfer.items).map(i => ({ kind: i.kind, type: i.type })),
            types: event.dataTransfer.types,
            setDragImage(image, x, y) {
                console.writeln("Hello from CustomDragEventCreator.dataTransfer.setDragImage");
                event.dataTransfer.setDragImage(image, x, y);
            }
        } : null,
    };
}

这有以下cs文件

public class CustomDragEventArgs : MouseEventArgs
{
    /// <summary>
    /// The data that underlies a drag-and-drop operation, known as the drag data store.
    /// See <see cref="DataTransfer"/>.
    /// </summary>
    public CustomDataTransfer DataTransfer { get; set; } = default!;
}

自定义数据传输.cs：

public class CustomDataTransfer : DataTransfer
{
    public void SetDragImage(object image, int x, int y)
    {
        //How to get this working?
    }
}

并添加了事件处理程序：

[EventHandler("onCustomDragStart", typeof(CustomDragEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

在 index.html 上：

<script>
    Blazor.registerCustomEventType('customevent', {
        createEventArgs: CustomDragEventCreator
    });
</script>

【问题讨论】：

标签： blazor blazor-webassembly

【解决方案1】：

我最终使用了 JsRuntime。它有效，但可能不适合大型拖放列表。

xxx.js:

function addCustomListener(elementId, html)
{
    document.getElementById(elementId).addEventListener("dragstart", function(e) {
        let crt = this.cloneNode(true);
        crt.style.position = "absolute"; crt.style.top = "auto"; crt.style.left = "-10000px";
        crt.innerHTML = html;
        document.body.appendChild(crt);
        e.dataTransfer.setDragImage(crt, 0, 0);
    }, false);
}

xxx.razor.cs

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.InvokeVoidAsync("addCustomListener",$"{Setup.StylingId}", Setup.HtmlContent);
        }
    }

【讨论】：