Как реализовать перетаскивание в Blazor?

Question

Я знаю, что Blazor - это новая технология.Текущий выпуск версии v0.5.1

Однако в настоящее время я внедряю PoC для нового веб-приложения.Мы хотели бы иметь функцию перетаскивания в приложении.Я пытался реализовать его способом Blazor, но он не работает.

Моя дроптагета:

<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 ()", которая должна выполнить сбросtarget dropppable.

Кто-нибудь знает, как это исправить?

Sven

Answer 1

Да, мы все знаем, что можно вызывать функции Javascript из компонентов Blazor.Это не было проблемой.Вы не сделали свой код доступным.Однако, если вы обойдете Blazor и получите свой код с помощью JavaScript, это не тот путь.Это напоминает пользователя, который пытался создать древовидное представление в Blazor, реализуя древовидное представление исключительно с помощью JavaScript.Я предложил иначе, и наконец ему удалось создать древовидную структуру без использования какого-либо JavaScript.К чему мы должны стремиться: минимизировать использование JavaScript и использование C # на клиенте.Смотрите древовидное представление здесь: При обновлении с JS

двустороннее связывание Blazor не обнаружено

Answer 2

Я бы хотел опубликовать свое решение.

На данный момент я обнаружил, что dataTransfer.setData в настоящее время не работает в Blazor 0.5.1.Я могу обойти это, сохранив перетаскиваемый элемент в общем классе C #, который внедряется как служба DI.У контейнера должен быть вызов "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: https://github.com/sven5/Blazor/tree/master/HelloWorldDragDrop

Answer 3

ВАЖНО: Я полагаю, что 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();
}

}