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

blazor c# html

Вопрос

Я знаю, что 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)
{
}

}

Проблема заключается в том, что цель перетаскивания не отображается в браузере как цель перехода:

Перетащите Drop в браузере

То, что я читал до сих пор, заключается в том, что при прикреплении обработчика события к функции Blazor C # (например, ondragstart), чем поведение по умолчанию - это хорошо известное «e.preventDefault ()», которое должно сделать droppable целевой.

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

Sven

Принятый ответ

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

До сих пор я узнал, что 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


Популярные ответы

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



Лицензировано согласно: CC-BY-SA with attribution
Не связан с Stack Overflow
Является ли этот КБ законным? Да, узнайте, почему
Лицензировано согласно: CC-BY-SA with attribution
Не связан с Stack Overflow
Является ли этот КБ законным? Да, узнайте, почему