|
Qoplanish chegarasini o'zgartirish
|
| bet | 8/15 | | Sana | 13.06.2024 | | Hajmi | 1,37 Mb. | | #263484 |
Bog'liq Web dasturlash Qoplanish chegarasini o'zgartirish
Odatiy bo'lib, haddan tashqari hodisa faqat ko'chirilayotgan elementning kamida 50% qabul qiluvchi elementga to'g'ri kelganda yonadi. Ushbu chegaraning o'xshashligi miqdori quyidagi jadvalda ko'rsatilgan qiymatlarni qabul qilishi mumkin bo'lgan bardoshlik opsiyasi yordamida o'zgartirilishi mumkin:
Men tez-tez ishlatadigan ikkita qiymat, moslashish va teginish, foydalanuvchilarga eng mantiqiy bo'lganlardir. Men sudrab olingan element qabul qiluvchi elementning ko'chirilgan joyida qolishi kerak bo'lganda va tortib olingan element asl holatiga qaytganda teginish qiymatidan foydalanaman (misol keyinroq beriladi). Fit va teginish parametrlaridan foydalanish misoli quyida ko'rsatilgan:
Klon qiymati jQuery UI-ga barcha mazmuni bilan birga suzuvchi elementning nusxasini yaratish va natijadan yordamchi element sifatida foydalanishni aytadi. Natija rasmda ko'rsatilgan:
Yordamchi element foydalanuvchi sichqoncha tugmachasini ko‘chirilayotgan element ustiga qo‘yib yuborganida olib tashlanadi va ko‘chirilayotgan element va qabul qiluvchi element asl o‘rnida qoladi.
Rasmda ko'rsatilganidek, dastlabki suzuvchi element o'z o'rnida qoladi va faqat yordamchi element sichqoncha ko'rsatgichidan keyin ekran bo'ylab harakatlanadi. Agar ko'chirilayotgan elementning o'lchami bizning misolimizdagidek katta bo'lsa, u hujjatning qolgan elementlarini qamrab oladi, shuning uchun foydalanuvchi uchun hatto qabul qiluvchi elementning o'rnini kuzatish qiyin bo'ladi. Ushbu muammoni quyidagi misolda ko'rsatilganidek, yordamchi variantning qiymati sifatida funktsiyani taqdim etish orqali hal qilish mumkin:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable((activeClass: "faol", hoverClass: "hover" )); ))) ... Misolni ishlating
Foydalanuvchi elementni sudrab borishni boshlaganida, jQuery UI yordamchi parametr tomonidan belgilangan funksiyani chaqiradi va qaytarilgan elementni ko'chiriladigan ob'ekt sifatida ishlatadi. Bunday holda, img elementini yaratish uchun jQuery dan foydalanaman. Natija rasmda ko'rsatilgan:
Kichkina rasm suzuvchi element uchun to'ldiruvchi vazifasini bajaradi, bu hujjatdagi boshqa elementlarni kuzatishni ancha osonlashtiradi.
JQuery UI Droppable shovqin hodisalariga o'tadigan ui ob'ekti yordamchi xususiyatni o'z ichiga oladi va bu xususiyatdan yordamchi elementni sudrab olib ketilayotganda boshqarish uchun foydalanish mumkin. Ushbu xususiyatni haddan tashqari hodisalar bilan birgalikda ishlatish misoli quyida ko'rsatilgan:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", ustida: function(voqe, ui) ( ui.helper.css("chegara", "qalin qattiq #27e6ed") ) , chiqib: function(voqea, ui) ( ui.helper.css("chegara", "") ) )); ))) ...
Bu yerda over va out hodisalari va ui.helper xossasi yordamchi element xost elementi bilan ustma-ust tushganda uning atrofidagi chegarani ko‘rsatish uchun ishlatiladi. Natija rasmda ko'rsatilgan:
|
| |
