100+ JavaScript

Loop In JS Function localStorage Drag Drop Object get set

Asynchronous JS

Callback Promises

Web API

Web API Intro Cookie Fetch API

JS PDF

Basic Pdf

Toast.js

Basic Toastr

Learn Drag🐲 And Drop💧 In JS

Drag and drop allow to users to move objects, files, or data between locations with minimal effort.

Here are some important drag-and-drop events:

dragstart fires when the users starts dragging an element.
dragover fires repeatedly while the dragged element is over a drop target.
drop fires when the dragged element is dropped on a drop target.
dragend fires when the drag operation is complete, whether it was successful or not.
dataTransfer : this is the key object in drag and drop operations. It hold the data that being dragged and allows you to manipulate it.
setData & getData: imethods are part of the dataTransfer object.
- `setData`: Stores the data that will be dragged with a specific type (e.g., `text/plain`).
  Syntax: event.dataTransfer.setData(type, data);
- `getData`: Retrieves the stored data during the drop event.
  Syntax: let data = event.dataTransfer.getData(type);

You need a basic understanding of addEventListener in JavaScript.

Drag This

Drop Here

dragstart


let drag=document.querySelector(".drag");
let drop=document.querySelector(".drop");

drag.addEventListener("dragstart",function(event){
    //console.log(event);
    //console.log(event.target.className);
    event.dataTransfer.setData("text/plain",event.target.className);
})

dragover

dragover event: This event fires whenever an element or text selection is being dragged over a valid drop target (an element with a drop event listener). By default, most elements are not valid drop targets. event.preventDefault(): By default, the browser does not allow dropping items unless you specifically allow it. Calling event.preventDefault() in the dragover event listener tells the browser that the element can accept a drop, making it a valid drop target.


let drag=document.querySelector(".drag");
let drop=document.querySelector(".drop");
drop.addEventListener("dragover",function(event){
    event.preventDefault();

})

drop


let drag=document.querySelector(".drag");
let drop=document.querySelector(".drop");
drop.addEventListener("drop",function(event){
    //console.log(event.dataTransfer);
    let data=event.dataTransfer.getData("text");
    console.log(data);

    let content=document.querySelector("."+data);

    drop.appendChild(content);
    drop.style.backgroundColor="#dddd";
    drop.style.color="black";
})

🌐Application🈸

File Upload Interfaces

Example: Google Drive, Dropbox.

User can drag fiiles from their computer and drop them int o a desingnated are to upload files.

E-commerce Shopping Carts

Users can drag items into a Shopping cart or whshlist.

Learning Management Systems (LMS)

Teachers or students can drag and drop course materials, assignments, or quizzes into different modules or folders to organize course content