Blazor에서 드래그 앤 드롭을 구현하는 방법은 무엇입니까?

blazor c# html

문제

Blazor는 새로운 기술이라는 것을 알고 있습니다. 현재 릴리스 상태 v0.5.1

그러나 나는 현재 새로운 웹 애플리케이션을위한 PoC를 구현 중이다. 앱에 드래그 앤 드롭 기능을 사용하고 싶습니다. Blazor 방식으로 구현하려고했지만 작동하지 않습니다.

내 droptarget :

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

그리고 draggable 항목 :

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

블레이저 C # 코드 :

@functions {

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

void AllowDragOver(UIDragEventArgs e)
{
}

}

문제는 드롭 대상이 드롭 대상으로 브라우저에 표시되지 않는다는 것입니다.

브라우저에서 드래그 드롭

내가 지금까지 읽은 것은 Blazor C # 함수 (예 : ondragstart)에 이벤트 처리기를 기본 동작보다 연결하면 드롭 대상을 삭제 가능하게 만드는 잘 알려진 "e.preventDefault ()"입니다.

누구든지이 문제를 해결하는 방법을 알고 있습니까?

스벤

수락 된 답변

내 솔루션을 게시하고 싶습니다.

지금까지 알아 낸 점은 dataTransfer.setData가 현재 Blazor 0.5.1에서 작동하지 않는다는 것입니다. DI 서비스로 삽입 된 공유 C # 클래스에서 드래그 한 요소를 저장하면이 문제를 해결할 수 있습니다. 컨테이너에서 "e.preventDefault ()"를 호출해야 유효한 드롭 대상이됩니다. 이것은 C #에서는 가능하지 않지만 이것을 순수한 자바 스크립트라고 부를 수 있습니다.

<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


인기 답변

예, 우리 모두는 Blazor 구성 요소에서 Javascript 기능을 호출 할 수 있다는 것을 알고 있습니다. 그건 문제가 아니야. 코드를 사용 가능하게 만들지 않았습니다. 그러나 Blazor를 우회하여 자바 스크립트를 사용하여 코드 작업을 얻는다면 이것은 불가능합니다. 이것은 Blazor에서 트 리뷰를 작성하려고 시도한 사용자를 상기시켜 주며, 순수하게 자바 스크립트로 트리 뷰를 구현합니다. 나는 달리 제안했고, 마침내 자바 스크립트를 전혀 사용하지 않고 treeview를 만드는 데 성공했다. JavaScript를 사용하는 것을 최소화하고 클라이언트에서 C #을 사용하는 것입니다. 여기에서 treeview를보십시오 : Blazor 양방향 바인드가 JS에서 업데이트되면 감지되지 않음



아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.
아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.