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

受け入れられた回答

解決策を投稿したいのですが。

これまでにわかったことは、dataTransfer.setDataが現在Blazor 0.5.1では機能しないことです。これを回避するには、ドラッグした要素をDIサービスとして挿入された共有C#クラスに保存します。有効なドロップターゲットにするには、コンテナは "e.preventDefault()"を呼び出す必要があります。これはC#では不可能ですが、純粋なJavascriptとしてこれを簡単に呼び出すことができます。

<div class="col-sm-1" dropzone="move" ondragenter="@(e => OnContainerDragEnter(e))" ondragover="event.preventDefault();" ondragleave="@(e => OnContainerDragLeave(e))"
 ondrop="@(e => OnContainerDrop(e, Date))" style="@_highlightColor;@_highlightDropTargetStyle">

ドラッグアンドドロップは、C#では非常にうまく機能し、ちらつきや中断なしに非常にスムーズです。私は次の日に簡単な実用例を作成します。

更新:

これはGithubでの約束のデモです


人気のある回答

はい、私たちは皆、BlazorコンポーネントからJavascript関数を呼び出すことが可能であることを知っています。それは問題ではありませんでした。あなたはあなたのコードを利用可能にしませんでした。ただし、Blazorを回避し、JavaScriptを使用してコードを機能させるには、これは不可能です。これは、Blazorでツリービューを作成しようとしたユーザーに、純粋にJavaScriptでツリービューを実装することを思い出させます。私は別の方法を提案しました、そしてついに彼はまったくJavaScriptを使用せずにツリービューを作成することに成功しました。 JavaScriptの使用を最小限に抑え、クライアントでC#を使用するという、これが私たちの努力です。こちらのツリービューを参照してください。JSから更新されたときにBlazor双方向バインドが検出されない



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