web-dev-qa-db-ja.com

Blazorでドラッグアンドドロップを実装する方法

Blazorが新しいテクノロジーであることは知っています。現在のリリースではv0.5.1と表示されています

ただし、現在、新しいWebアプリケーションのPoCを実装しています。アプリに機能をドラッグ＆ドロップしたいのですが。私はそれをブレイザーの方法で実装しようとしましたが、うまくいきません。

私のドロップターゲット：

<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)
{
}

}

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

Drag Drop in browser

これまでに読んだのは、イベントハンドラーをBlazor C＃関数（例：ondragstart）にアタッチする場合、デフォルトの動作は、ドロップターゲットをドロップ可能にする既知の「e.preventDefault（）」であるということです。

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

スヴェン

c#htmlblazor
7
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＃でかなりうまく動作し、ちらつきや中断のない非常にスムーズです。翌日には簡単な作業例を作成します。

UPDATE：

Githubでの約束されたデモは次のとおりです。 https://github.com/sven5/Blazor/tree/master/HelloWorldDragDrop

4
Sven

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

1
enet

重要：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();
}

}
0
Issac