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

202 views   Javascript  2021.01.02

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.

Answers, ideas and Comments

» 2 ideas

codeveloper • 11 months 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. »


gadrawin • 11 months 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. »

There is one reply on this idea
@Devuntildeath • 11 months 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

In order to go deep, share any relevant idea or posting solution to some questions, You have to sign in or create a new account if you don't have one. And get Donnekted(connected)

Log in now  Join the Team

This site is for sharing topics, questions, answers, experiences or other contents related to different stuffs, especially technology. For existing users, They can make any topic(post) to discuss about in hope for ideas or any result from other people from different communities. In order to get involved, Get donnekted(connected) by Joining us here!

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

86 people joined this donnektish

Maintain social distancing, to avoid Covid19