How To Add Drag And Drop To Blazor

In todays tutorial I am going to teach you how to implement drag and drop functionality to a program in Blazor. Yes you do need to use JS Interop, but without native features from Blazor its kind of what must be done. You will understand why this is probably the best way, and if you go lower down to the description you will find a snippet of code you need.

00:00 Intro
00:58 Skip To Project
3:16 HTML5 way of Drag Drop
3:37 CSS Isolation
7:20 HTML5 Drag And Drop End Product
7:39 Introducing JS Library
9:06 Lifecycle explanation of OnAfterRenderAsync
9:45: Adding the library to Blazor
11:59: Working with less friendly JS Code in Blazor
14:45 Adding the Draggable element
17:30 Draggable end result
18:48 Adding Dropzone
21:27 Mistakes were made, Check Description For Code
22:30 Wrapping Up

Fair Use and Resources:
Chill Jazzy Hip Hop Royalty Free Jazz Hop Music
Abstract Atmospheric Background by Jorik Basovkground

***Here is the code that you should replace the dragAndDrop(className) js function with ****
function dragAndDrop(className)
{
const position = { x: 0, y: 0 }

interact(className).draggable({
listeners: {
start(event) {
},
move(event) {

`translate(${position.x}px, ${position.y}px)`
},
}, modifiers: [
restriction: '.main',
endOnly: true
})]
})
};

[jonhelgestorvik]

Love your video! how long have you been a developer? How did you get started?

[asanoguera]

Fantastic video, thanks a lot for the information, I try to use resize, how do I can get the coords of final position of a resize on Blazor, can you give me some tips to follow, thanks a lot again!?

[egqzyce]

Plz let me know when U can write all of the functionality in Blazor

[codywatt]

The "Mistakes were made" code in the description seems to be the exact same code that is in the video.
My draggable isn't being restricted to any DIV.

Also if you have a page comprised of multiple components say a top left, top middle, top right kind of setup and each of those divs is a separate file controlling the content in them, can the draggable target a dropzone inside one of the other components? Any idea how to solve this?

[okachobe]

What do you think of Fluxor state management??