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.
GET YOUR FREE BLAZOR CHEAT SHEET HERE!!!: JustBlazor.com
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
Interact.js site :
https://interactjs.io/docs/installation
***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) {
console.log(event.type, event.target)
},
move(event) {
position.x += event.dx
position.y += event.dy
event.target.style.transform =
`translate(${position.x}px, ${position.y}px)`
},
}, modifiers: [
interact.modifiers.restrictRect({
restriction: '.main',
endOnly: true
})]
})
};
