Drag And Drop in HTML ek useful feature hai jo kisi element ko drag (pakad kar kheechna) aur drop (chhodna) karne ki permission deta hai. Drag And Drop in HTML ka use web pages me objects ko ek jagah se dusri jagah move karne ke liye hota hai.
Drag and Drop kya hota hai?
Drag And Drop in HTML ek common feature hai. Isme user kisi object ko grab karke usse kisi dusri jagah le jaakar drop kar sakta hai. Drag And Drop in HTML interactive web applications banane me bahut useful hota hai.
Example:
Drag And Drop Event ke Parts ko Samjhte hain
Drag And Drop in HTML me kuch important steps aur events hote hain.
1. Element ko Draggable banana
Kisi element ko drag karne ke liye draggable="true" attribute lagana padta hai. Isse browser ko pata chalta hai ki ye element drag kiya ja sakta hai.
Example:
2. Kya Drag hoga – ondragstart aur setdata()
Sabse pehle yeh specify karna hota hai ki jab element drag ho, tab kya hona chahiye.
dataTransfer.setData() method dragged data ka type aur value set karta hai.
Is case me:
-
Data type “text” hai
-
Value draggable element ka id hai (jaise
"img1")
Matlab jab image drag hoga, uska id store ho jayega, taaki baad me use kiya ja sake.
3. Kahan Drop hoga – ondragover
<div> element ka ondragover attribute ek function call karta hai jo batata hai ki dragged data kahan drop ho sakta hai.
By default kisi element me drop allowed nahi hota.
Drop allow karne ke liye element ke default behavior ko rokna padta hai. Yeh preventDefault() method se kiya jata hai.
Agar preventDefault() nahi lagaya, to drop kaam nahi karega.
4. Drop kaise hoga – ondrop
Jab dragged data drop hota hai, tab drop event trigger hota hai.
Example:
<div> ka ondrop attribute ek function call karta hai jo dragged element ko new location par place karta hai.
Is tarah Drag And Drop in HTML web pages ko zyada interactive banata hai aur users ko elements ko easily ek jagah se dusri jagah move karne ki facility deta hai.
