Toptube Video Search Engine



Title:How To Add Drag And Drop To Blazor
Duration:24:39
Viewed:10,123
Published:01-03-2022
Source:Youtube

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



SHARE TO YOUR FRIENDS


Download Server 1


DOWNLOAD MP4

Download Server 2


DOWNLOAD MP4

Alternative Download :