What's the logic behind Drag n' Drop algorithm using Javascript?

I always wonder what's going on under the hood when I take a photo, document file or multiple folders or files and I drag from some place and paste it anywhere. With dev ideas, I really want to know the logic behind those actions which result to file uploading with easeness by detailing some how it works and how javascript or other progamming language is good at that job, with code examples.

»Javascript @anonymous4

» 2 answers  » 212 views   1 like

Add photos

Codeveloper • 1 year ago
Nowadays, the browser has native drag & drop support for images, which means that pointer events are not for use anymore. But for learning purpose you can use pointer events for handling drag n drop functionality. The following events occur when performing D-n-D: When a user presses on an image and starts dragging, pointerdown event comes into play. When they start moving the pointer or any object such as image, then pointermove comes into play twice or several times. At the end user may need to cancel action then, pointercancer event occurs. »

0  Dislike  •  Reply

Gadrawin • 1 year ago
When it comes to Drag’n’Drop many actions are simplified especially when you are using computer's (touch pad or mouse) Drag’n’Drop actully works as cloning your file, then leaving original file in place and upload copy of it, It happens in seconds. For instance: document, audio or video files. Still, want to know the logic behind that? Briefly and simply, Mouse events come into play. On mousedown – prepare the element for moving, if necessary by cloning it or adding a class to it. On mousemove - move it by changing left or top with position:absolute or other trick. On mouseup – perform all actions related to finishing the drag’n’drop. »

0  Dislike  •  Reply
There is one reply on this!

@Devuntildeath • 1 year ago
I like your idea about drag and drop but there is no need to position to absolute, instead you can use other tricks including flexbox and grid techs

Back to top

[SHARE THIS POST]: The post's archived Spread it to others!

Posted under this donnektish »
This community is about sharing contents such as questions and answers discussing about Javascript and TypeScript, ES5, ES6
90 people joined this donnektish

Maintain social distancing, to avoid Covid19