|
Kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti farg
|
| bet | 1/15 | | Sana | 13.06.2024 | | Hajmi | 1,37 Mb. | | #263484 |
Bog'liq Web dasturlash O’ZBEKISTON RESPUBLIKASI AXBOROT TEXNOLOGIYALARI VA KOMMUNIKATSIYALARINI RIVOJLANTIRISH VAZIRLIGI
MUHAMMAD AL-XORAZMIY NOMIDAGI TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI FARG’ONA FILIALI
2-BOSQICH KIF_716_22 GURUH TALABASINING
“Web dasturlashga kirish” fanidan
MUSTAQIL ISH
Bajardi: Abduhalilov.A
Qabul qildi: Uzakov.B
Mavzu: jQuery UI interaktiv imkonyatlari: Drag and Drop. Amaliy ko`rsatmalar
Reja:
1. HTML Drag va Drop API
2. ondrop
3. Draggable Interaktiv hodisalari
4. Drag/Tosh funksiyalari
HTML Drag va Drop API
OldingiKeyingi
HTMLda har qanday elementni tortib boshqa joyga olib o'tish mumkin.
Misol
Self-study logotip rasmini ikkinchi to'rtburchak ichiga tortib olib o'ting.
Drag va Drop
Drag va drop juda keng tarqalgan xususiyat bo'lib, bunda obyektni "ushlab", uni boshqa joyga tortib olib borish mumkin.
Brauzerlar qo'llab-quvvatlashi
Quyidagi jadvalda Drag va Dropni to'liq qo'llab-quvvatlaydigan birinchi brauzer versiyasi ko'rsatilgan.
API
|
|
|
|
|
|
Drag va Drop
|
4.0
|
9.0
|
3.5
|
6.0
|
12.0
|
HTML Drag va Drop misoli
Quyida oddiy tortib olib o'tish misoli keltirilgan:
Misol
Sinab ko'rish
Bu murakkab tuyulishi mumkin, shuning uchun drag va drop hodisasining barcha turli qismlarini ko'rib chiqamiz.
Elementni tortib olinadigan qilib qo'yish
Avvalo: Elementni tortib olinadigan qilish uchun draggable atributiga true qiymati berib qo'yiladi:
Misol
ondragstart va setData()
Endi, element sudralganda nima bo'lishi belgilanadi.
Yuqoridagi misolda ondragstart atributi drag(event) funksiyasini chaqiradi, bu funksiya qaysi ma'lumotlarni sudrab borishni belgilaydi.
dataTransfer.setData() metodi ma'lumotlar turini va tortilgan ma'lumotlarning qiymatini belgilaydi:
Misol
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
Bu yerda, ma'lumotlar turi "text" va qiymati esa sudrab olinadigan elementning identifikatoridir("drag1").
ondragover
ondragover hodisasi sudrab olingan ma'lumotlarni qayerga tashlash mumkinligini belgilaydi.
Default holatda, ma'lumotlarni/elementlarni boshqa elementlarga tashlab bo'lmaydi. Tushishga ruxsat berish uchun biz elementning default holatining oldini olishimiz kerak.
Bu esa ondragover hodisasi uchun event.preventDefault() metodini chaqirish orqali amalga oshiriladi:
Misol
event.preventDefault()
ondrop
Surab olingan ma'lumotlar tushirilganda, ondrop hodisasi sodir bo'ladi.
Yuqoridagi misolda ondrop atributi drop(event) funksiyasini chaqiradi:
Misol
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Kod mazmuni:
Brauzerda ma'lumotlarning default holatda ishlashining oldini olish uchun preventDefault() chaqiriladi
DataTransfer.getData() metodi bilan sudrab olingan ma'lumotlar olinadi. Bu usul setData() metodida bir xil turga o'rnatilgan har qanday ma'lumotlarni qaytaradi
Olingan ma'lumotlar sudrab olingan elementning identifikatoridir ("drag1")
Olib tashlangan element tushiriladigan elementga qo'shiladi(append yordamida)
|
|
Bosh sahifa
Aloqalar
Bosh sahifa
Kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti farg
|
