HTML sudrab tashlash
HTML Drag and Drop API elementni sudrab boshqa joyga tashlash imkonini beradi.
Misol
W3Schools rasmini ikkinchi to‘rtburchakga sudrab tashlang.
Sudrab tashlash (Drag and Drop)
Sudrab tashlash (drag and drop) juda keng tarqalgan funksiya. Bunda obyektni "ushlab", boshqa joyga sudrab olib borasiz.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi raqamlar Drag and Drop ni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini bildiradi.
| API | |||||
|---|---|---|---|---|---|
| Sudrab tashlash (Drag and Drop) | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop API dan foydalanish misoli
Quyidagi misol oddiy sudrab tashlash misolidir:
Misol
<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text",
ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)"
ondragover="dragoverHandler(event)"></div>
<img id="img1" src="img_logo.gif"
draggable="true" ondragstart="dragstartHandler(event)" width="336"
height="69">
</body>
</html>
O‘zingiz sinab ko‘ring »Bu murakkab ko‘rinishi mumkin, lekin sudrab tashlash hodisasining barcha turli qismlarini ko‘rib chiqaylik.
Elementni sudraladigan qilish
Avvalo: Elementni sudrab tashlanadigan qilish uchun draggable atributini true ga sozlang:
<img id="img1" draggable="true">
or:
<p id="p1" draggable="true">Draggable text</p>
Nimani sudrash kerak — ondragstart va setData()
Keyin, element sudrab olib borilganda nima sodir bo‘lishi kerakligini belgilang.
Yuqoridagi misolda <img> elementining ondragstart atributi
sudrab olib boriladigan ma’lumot nima ekanligini belgilaydigan funksiyani (dragstartHandler(ev)) chaqiradi.
dataTransfer.setData() metodi sudrab olib boriladigan ma’lumotning turini va qiymatini belgilaydi:
function dragstartHandler(ev) {
ev.dataTransfer.setData("text",
ev.target.id);
}
Bu holda ma’lumot turi "text" va qiymat sudrab tashlanadigan elementning id’si ("img1").
Qayerga tashlash - ondragover
<div> elementining ondragover atributi
sudrab olib borilgan ma’lumot qayerga tashlanishi mumkinligini belgilaydigan funksiyani (dragoverHandler(ev)) chaqiradi.
Standart holda ma’lumotlar/elementlar boshqa elementlarga tashlanishi mumkin emas. Tashlashga ruxsat berish uchun biz elementning standart ishlov berilishini to‘xtatishimiz kerak.
Buni ondragover hodisasi uchun preventDefault() metodini chaqirish orqali amalga oshiramiz:
function dragoverHandler(ev) {
ev.preventDefault();
}
Tashlash amalini bajarish — ondrop
Sudrab olib borilgan ma’lumot tashlanganda, drop hodisasi sodir bo‘ladi.
Yuqoridagi misolda <div> elementining ondrop atributi dropHandler(event) funksiyasini chaqiradi:
function dropHandler(ev) {
ev.preventDefault();
const
data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Kod tushuntirilishi:
- Brauzerning ma’lumotga standart munosabatini to‘xtatish uchun
preventDefault()ni chaqiring (standart holda tashlanganda havola sifatida ochiladi) - Sudrab olib borilgan ma’lumotni
dataTransfer.getData()metodi bilan oling. Bu metodsetData()metodida bir xil turdagi qilib belgilangan har qanday ma’lumotni qaytaradi - Sudrab olib borilgan ma’lumot — sudrab olib borilgan elementning id’si ("img1")
- Sudrab olib borilgan elementni tashlanadigan elementga qo‘shing
Ko‘proq misollar
Misol
<h1> elementini <div> elementiga sudrab tashlash:
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text",
ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data =
ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)"
ondragover="dragoverHandler(event)"></div>
<h1 id="h1"
draggable="true" ondragstart="dragstartHandler(event)">W3Schools.com</h1>
O‘zingiz sinab ko‘ring »
Misol
<a> elementini <div> elementiga sudrab tashlash:
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text",
ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data =
ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)"
ondragover="dragoverHandler(event)"></div>
<a
id="link1" href="https://w3schools.com" draggable="true" ondragstart="dragstartHandler(event)">W3Schools.com</a>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!