Blazorでドラッグ&ドロップを実装する方法は?

blazor c# html

質問

私はBlazorが新しい技術であることを知っています。現在のリリースではv0.5.1

しかし、私は現在、新しいWebアプリケーション用のPoCを実装しています。私たちはアプリにドラッグ&ドロップ機能を持たせたいと思っています。私はそれをBlazorの方法で実装しようとしましたが、機能しません。

私のdroptarget:

<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">

そして、ドラッグ可能なアイテム:

<span class="badge badge-warning" draggable="true">îtem 1</span>

Blazor C#コード:

@functions {

void Add()
{
     Items.Add("hello");
}

void AllowDragOver(UIDragEventArgs e)
{
}

}

問題は、ドロップターゲットがドロップターゲットとしてブラウザに表示されないことです。

ブラウザのドラッグドロップ

これまでに読んだことは、デフォルトの動作よりもBlazor C#関数(例:ondragstart)にイベントハンドラを追加すると、ドロップターゲットを削除可能にする既知の "e.preventDefault()"があることです。

誰もがこれを修正する方法を知っていますか?

Sven

人気のある回答

重要:私はUIDragEventArgsは現在サポートされていないと信じています...

... "は、デフォルトの動作よりもよく知られている" e.preventDefault() "です。これはドロップ対象を落とせるようにする必要があります" ==>私はそれについては分かりません。

Here's how you've got to set your elements.
Note: The code in the methods below is in Javascript. You've got to translate it to C#  

    <div id="targetDiv" class="col" ondrop="@Add" ondragover="@AllowDrop"></div>

    <span id="draggedSpan" class="badge badge-warning" draggable="true" ondragstart="@AllowDragOver>îtem 1</span>

@functions {

void Add(UIDragEventArgs e)
{
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(data));

     Items.Add("hello");
}

void AllowDragOver(UIDragEventArgs e)
{
     e.dataTransfer.setData("text", e.target.id);
}

void AllowDrop(UIDragEventArgs e)
{
    e.preventDefault();
}

}



ライセンスを受けた: CC-BY-SA with attribution
所属していない Stack Overflow
このKBは合法ですか? はい、理由を学ぶ
ライセンスを受けた: CC-BY-SA with attribution
所属していない Stack Overflow
このKBは合法ですか? はい、理由を学ぶ