Qaytadan o'ylab ko'ring

Asosiy narsani olish va uni chiroyli qilish

reaktsiya kiritish-chiroyli-dnd

Sürükle-tashlab yuborish - narsalarni ko'chirish va qayta tartiblashning intuitiv usuli. Biz Atlassian-da yaqinda reaktiv-dnd-ni chiqardik, bu esa Internetdagi ro'yxatlarni yanada chiroyli, tabiiy va kirishga olib keladi.

Jismoniylik

React-beautiful-dnd dizayn g'oyasi jismoniylikdir: biz foydalanuvchilar o'zlarini jismoniy narsalarni atrofda siljitganday his qilishlarini istaymiz. Bu eng yaxshi kontrast orqali tasvirlangan - shuning uchun standart tortish va tushirish xatti-harakatlarini va qanday qilib yaxshiroq ishlashga harakat qilganimizni bilib olaylik.

jquery-sortable
Ushbu misol ajoyib jquery-sortable-dan foydalanadi. Bu tortish va tushirish mexanizmi juda standart va yaxshi ma'lumot olish nuqtasi bo'lib xizmat qiladi.

Harakat

tez harakat standart hisoblanadi

Saqlash paytida boshqa narsalar yo'qoladi va kerak bo'lganda yana paydo bo'ladi. Bundan tashqari, biror narsani tashlasangiz, u darhol yangi uy holatida paydo bo'ladi.

ko'proq tabiiy harakat

Tabiiyroq harakatlanish uchun biz elementlarning harakatini jonlantiramiz, chunki ular harakatlantiruvchi effektni yanada aniqroq ko'rsatish uchun harakat qilish kerak bo'lganda harakat qilish kerak. Shuningdek, biz elementning tomchisini jonlantiramiz, shunda u yangi uy holatiga tushadi. Hech qanday holatda biron bir joyga biron bir joyga tezda ko'chirilmaydi - tortish yoki tortmasligidan qat'iy nazar.

Qachon harakat qilishni bilish

O'zaro tortishish va tushirish o'zaro ta'sirlari foydalanuvchi drayverni boshlagan pozitsiyasiga asoslanishi odatiy holdir

tanlash nuqtasi asosida ta'sir

Ushbu misolda foydalanuvchi birinchi elementning yuqori o'ng burchagini egallamoqda. Ikkinchi element yangi holatga o'tgunga qadar foydalanuvchi adolatli yo'lni pastga siljitishi kerak. Buning sababi shundaki, hisob-kitoblar foydalanuvchini dastlabki tanlash holatiga asoslanadi.

tortishish markaziga asoslangan ta'sir

Reaksiya - go'zal-dnd-da, sudrab boradigan narsalarning ta'siri foydalanuvchi tortib olgan narsadan qat'i nazar, uning tortishish markaziga bog'liq. Sürükleyen narsalar ta'siri, o'lchovlar to'plamiga o'xshash qoidalarga amal qiladi . Hatto moslashuvchan balandlikdagi narsalar bilan ham tabiiy harakatlanish tajribasini o'tkazish uchun ba'zi qoidalar berilgan:

  • Agar sudraluvchi elementning markaziy holati ro'yxat chegaralaridan biriga o'tib ketsa, ro'yxat yuqoriga siljiydi
  • Qolgan elementni tortish elementi harakatlantiruvchi elementning markaziy holati qolgan elementning chetidan o'tib ketganda harakatlantiruvchi elementdan xalos bo'ladi. Boshqa yo'l qo'ying: (A) elementning o'rta holati boshqa elementning (B) chetidan o'tib ketganda, B yo'ldan chiqadi.

Foydalanish mumkin

An'anaviy ravishda tortish va tushirish shovqinlari faqat sichqonchani yoki sensorli o'zaro ta'sirni tashkil etadi. reaksiya - go'zal-dnd kemalarni faqat klaviaturadan foydalanib tortish va tushirishga ta'sir ko'rsatadigan kemalar. Bu foydalanuvchilarga o'zlarining tajribalarini to'liq klaviaturadan haydashga imkon beradi. Bundan tashqari, ushbu tajribani ilgari istisno qilinishi mumkin bo'lgan foydalanuvchilarga ochish.

Brauzerni hurmat qilish

Klaviaturani qo'llab-quvvatlashdan tashqari, biz klaviatura yorliqlarining standart brauzer klaviaturasi bilan o'zaro ishlashini tekshirdik. Agar foydalanuvchi sudrab tortmasa, ular odatdagidek klaviaturadan foydalanishlari mumkin. Sichqalash paytida biz foydalanuvchi uchun suyuqlik ta'sirini ta'minlash uchun ba'zi yorliqlarni (masalan, yorliqlarni) bekor qilamiz va o'chirib qo'yamiz.

Ehtiyotkorlik bilan ishlab chiqilgan animatsiyalar

Biror narsa juda ko'p harakat qilganda, foydalanuvchini animatsiyalar bilan chalg'itishi yoki yo'lga tushishi oson kechadi. Biz to'g'ri ko'rsatma, ishlash va interaktivlik muvozanatini ta'minlash uchun turli xil animatsiyalarni yaratdik.

Interaktivlikni maksimal darajada oshiring

reaktsiya qilish-chiroyli-dnd juda ko'p interfaol bo'lmagan davrlarni oldini olish uchun juda qiyin ishlaydi. Foydalanuvchi interfeysni boshqarishda bo'lganidek va interfeys bilan ishlashni davom ettirishdan oldin animatsiyaning tugashini kutmasliklarini his qilishi kerak.

Tushirish

Sürgülü elementni tashlaganingizda, uning harakati fizikaga asoslanadi (rahmat reaktsiya). Natijada tomchi yanada og'irroq va jismoniy ko'rinishga olib keladi.

Yo'ldan chiqib ketish

Narsalarni harakatlantiradigan narsadan tashqarida bo'lgan narsalar buni fizikaga emas, balki CSS-ga o'tish bilan amalga oshiriladi. Bu GPUga harakatni boshqarishga ruxsat berish orqali ish samaradorligini oshirish. CSS animatsiya egri yo'ldan chiqib ketishga imkon beradigan tarzda yaratilgan.

Qanday qilib tuzilgan:

  1. Issiqlik davri tabiiy javob vaqtini taqlid qilish uchun
  2. Tez yo'ldan ozish uchun kichik bir faza
  3. Odamlar animatsiyaning ikkinchi yarmida jonlantirilgan har qanday matnni o'qishlari uchun uzun quyruq
yo'l harakati paytida ishlatiladigan animatsiya egri

Boshqalar bilan yaxshi o'ynaydi

Moslashuvchanlikni ta'minlab, narsalar intuitiv ravishda ishlashini ta'minlash uchun biz ko'p ishlarni qildik.

Sekin bosish va blokirovkalash

Foydalanuvchi sichqonchani biron bir element ustiga bosganida, biz foydalanuvchi bosgan yoki tortganligini aniqlay olmaymiz. Bundan tashqari, ba'zan foydalanuvchi bosganda ular kursorni biroz siljitishi mumkin - ixcham bosish. Shunday qilib, biz foydalanuvchi sichqonchani pastga (ma'lum chegara) bosib ma'lum bir masofani bosib o'tganidan keyingina sudrab yurishni boshlaymiz - agar ular egilib bosilsa, ular sichqonchani harakatga keltiradi. Agar tortishish chegarasi oshmasa, foydalanuvchi bilan o'zaro aloqa odatiy chertish kabi ishlaydi. Agar tortishish chegarasi oshsa, o'zaro aloqa tortish sifatida tasniflanadi va standart bosish harakati bajarilmaydi.

Bu iste'molchilarga langar kabi interfaol elementlarni o'rashga imkon beradi va ular standart langar ham, tortib olinadigan element ham bo'lishi mumkin.

Fokuslarni boshqarish

reaktsiya-chiroyli-dnd, bu odatiy yorliq oqimiga ta'sir qilmasligini ta'minlash uchun juda ko'p ishlaydi. Masalan, agar siz langar yorlig'i bilan o'ralgan bo'lsangiz, foydalanuvchi langarni o'rab turgan elementni emas, balki to'g'ridan-to'g'ri langarga o'tishi mumkin bo'ladi. Biz tez-tez harakatlanadigan elementlarga tab-indeksini qo'shamiz, hattoki siz odatda interfaol (masalan, div) narsani o'ralmasligingiz uchun, foydalanuvchiga uni sudrab yurish uchun klaviaturasi bilan kirish huquqi beriladi.

Hamma uchun emas

U erda juda ko'p kutubxonalar mavjud, ular React-da o'zaro aloqalarni tortib o'tkazishga imkon beradi. Ulardan eng e'tiborlisi bu hayratlanarli reaktsiya. Bu, ayniqsa, juda mos kelmaydigan html5-ni tortish va tushirish xususiyati bilan juda yaxshi ishlaydigan va tortib olinadigan primitivlarning katta to'plamini taqdim etishda aql bovar qilmaydigan ish. reaktsiya-chiroyli-dnd bu vertikal va gorizontal ro'yxatlar uchun maxsus yaratilgan yuqori darajadagi mavhumlikdir. Ushbu funktsional qism ichida reaktiv-dnd kuchli, tabiiy va chiroyli harakatlantiruvchi tajribani taqdim etadi. Ammo, reaktsiya-dnd tomonidan taklif qilingan funktsiyalarning kengligini ta'minlamaydi. Sizning foydalanish holatingizga bog'liq holda ushbu kutubxona siz uchun bo'lmasligi mumkin.

Muhandislik

Toza, kuchli API

Ushbu kutubxona ko'p vaqt bo'shashmasdan oldin deklarativ, toza va kuchli api ishlab chiqarishga e'tibor qaratildi. Ishni boshlash juda oson va butun tortishish tajribasini to'g'ri boshqarish darajasini ta'minlash kerak. Bu boshqa kutubxonalarda olib boriladigan ko'plab izlanishlarga, shuningdek, mahsulotlarni tashish bo'yicha jamoaviy tajribaga asoslangan. Men bu erda api tafsilotlarini bilmayman - lekin siz batafsil qo'llanmani topishingiz mumkin

Ishlash

reaktsiya-chiroyli-dnd juda zo'r o'ynash uchun yaratilgan - bu DNKning bir qismidir. Reaktiv ishlash bo'yicha dastlabki tergovlarga asoslanib, bu erda va bu erda o'qishingiz mumkin. U har bir vazifani bajarish uchun talab qilinadigan minimal miqdordagi xizmatlarni bajarish uchun mo'ljallangan.

Asosiy voqealar

  • Xotiralash bilan ulangan tarkibiy qismlardan foydalanish yagona tarkibiy qismlarni ta'minlash uchun kerak - minnatdorchilik reaksiya, qayta tanlash va eslab qolish.
  • Barcha harakatlanish harakatlariAnimationFrame so'rovi bilan yozilgan - rahmat raf-schd
  • Xotira hamma joyda ishlatiladi - rahmat memoize-one
  • Brauzerni ortiqcha ishlamasligi uchun oldini olish uchun tortib olayotganda, tortib olinadigan narsalarda ko'rsatuvchi voqealarni shartli ravishda o'chirib qo'yish - bu erda texnik haqida ko'proq ma'lumot olishingiz mumkin.
  • Asosiy bo'lmagan animatsiyalar GPU-da amalga oshiriladi
yangilanishlarning minimal miqdoribrauzer bo'yoqlarining minimal miqdori

Sinovdan o'tdi

реакция-chiroyli-dnd bir qator turli xil test strategiyalaridan foydalanadi, shu jumladan birlik, ishlash va integratsiya testlari. Tizimning turli tomonlarini sinash uning sifati va barqarorligini oshirishga yordam beradi.

Kodni qamrab olish kod salomatligi garovi bo'lmasa ham, bu yaxshi ko'rsatkich. Ushbu kod bazasi hozirda ~ 95% qamrab oladi.

Yozilgan

Ushbu kod bazasi katta ichki uyg'unlik va yanada barqaror kodni rivojlantirish uchun oqim turi bilan yozilgan. Shuningdek, u butun api yozilganligi sababli ishlab chiquvchilarning hujjatlari haqida ko'proq ma'lumot beradi.

Yakuniy so'zlar

Reaksiya-go'zal-dnd tufayli veb yanada chiroyli va kirish joyi bo'ladi deb o'ylaymiz. Qo'shimcha ma'lumot va misollar uchun omborga o'ting.

Buni amalga oshirgan Atlasianda barchaga katta rahmat

Xursandchilik

Blog tarjimasi

Ushbu blog xitoy tiliga @leesirbupt tomonidan tarjima qilingan! Rohatlaning!