|
Maqsadni qabul qilish ob'ektini ajratib ko'rsatish
|
| bet | 6/15 | | Sana | 13.06.2024 | | Hajmi | 1,37 Mb. | | #263484 |
Bog'liq Web dasturlash Maqsadni qabul qilish ob'ektini ajratib ko'rsatish
Hodisalarni faollashtirish va o'chirishdan foydalanib, foydalanuvchi elementni tortib olish jarayonini boshlaganida, siz maqsadli qabul qiluvchi ob'ektni ajratib ko'rsatishingiz mumkin. Ko'pgina hollarda, bu g'oya juda samarali bo'ladi, chunki u foydalanuvchiga qaysi elementlar sudrab tashlash modelining bir qismi ekanligi haqida ishonchli ma'lumot beradi. Tegishli misol quyida ko'rsatilgan:
... $(function() ( $("#draggable").draggable(); $("#droppable"). droppable(( drop: function() ( $("#draggable").text("Dropped" ") ), faollashtirish: function() ( $("#droppable").css((chegara: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable" ").css("chegara", "").css("fon-rang", ""); ))) )); ... Misolni ishlating
Foydalanuvchi elementni sudrab borishni boshlashi bilanoq, qabul qiluvchi elementimiz bilan bog‘langan faollashtirish hodisasi yonadi va ishlov beruvchi funksiyasi elementning chegara va fon rangining CSS xususiyatlarini o‘zgartirish uchun css() usulidan foydalanadi. Natijada, maqsadli qabul qiluvchi element ajratib ko'rsatiladi, bu foydalanuvchiga u va ko'chirilayotgan element o'rtasida bog'liqlik mavjudligini ko'rsatadi.
O'chirish hodisasi qabul qiluvchi elementdan CSS xususiyati qiymatlarini olib tashlash va foydalanuvchi sichqoncha tugmasini bo'shatgan zahoti uni qayta o'rnatish uchun ishlatiladi. (Ushbu hodisa, tortilgan elementning qabul qiluvchi elementda qolishi yoki qolmaganidan qatʼiy nazar, elementni tortib olish toʻxtatilganda boshlanadi.) Bu jarayon rasmda koʻrsatilgan:
Elementlarning bir-biriga mos kelishi bilan ishlash
Drag-and-drop texnologiyasi voqealarni qayta-qayta boshqarishni qo'shish orqali takomillashtirilishi mumkin. Over hodisasi ko'chirilayotgan elementning 50% qabul qiluvchi elementning istalgan qismidan yuqori bo'lganda sodir bo'ladi. Oldin bir-birining ustiga chiqqan elementlar bir-birining ustiga chiqmay qolsa, chiqish hodisasi boshlanadi. Ushbu hodisalarga javob misoli quyida ko'rsatilgan:
$(function() ( $("#draggable").draggable(); $("#droppable"). droppable(( drop: function() ( $("#draggable").text("Dropped") ) , faollashtirish: function() ( $("#droppable").css((chegara: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable"). css("chegara", "").css("fon rangi", ""); , ustida: function() ( $("#droppable").css((chegara: "o'rta ikkilik qizil", backgroundColor : "qizil" )); ), tashqaridan: function() ($("#droppable").css("chegara", "").css("fon rangi", ""); ) )); ) ); Ishga tushirish misoli
Oldingi misoldagi kabi bir xil ishlov beruvchi funktsiyalari bu erda qo'llaniladi, ammo bu holda ular haddan tashqari va tashqarida hodisalar bilan bog'lanadi. Suzuvchi elementning kamida 50% qabul qiluvchi element bilan bir-biriga to'g'ri kelganda, u ramkaga solinadi va rasmda ko'rsatilganidek, uning fon rangi o'zgaradi:
Ushbu 50% chegarasi qabul qiluvchi elementni yaratishda o'rnatilishi mumkin bo'lgan tolerantlik chegarasi deb ataladi, bundan keyin ko'rsatiladi.
|
| |
