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

blazor c# html

문제

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

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

내 droptarget :

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

그리고 draggable 항목 :

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

블레이저 C # 코드 :

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

}

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

브라우저에서 드래그 드롭

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

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

스벤

인기 답변

중요 : UIDragEventArgs가 현재 지원되지 않는다고 생각합니다 ...

... "기본 동작보다 잘 알려진"e.preventDefault () "드롭 대상을 droppable로 만들어야합니다"==> 잘 모르겠습니다.

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

}



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