Помозите развоју веб локације, дељење чланка са пријатељима!

Увод у јс превуци и испусти

Ноде.јс пружа Вуе.јс функцију са различитим опцијама за корисника као што је превлачење и испуштање у којем преносимо податке са једне локације на другу локацију, што значи превлачење и испуштање. Он пружа интерактивни начин да корисник манипулише својим подацима. Када вашем пројекту додамо функцију превлачења и испуштања, то је одличан начин да апликацију учините природном и прилагођеном кориснику. Корисницима пружа различите типове АПИ-ја за имплементацију функција превлачења и испуштања, као што су превлачење, превлачење, превлачење, драгентер, превлачење, превлачење и испуштање, итд.За имплементацију превлачења и испуштања потребан нам је објекат датаТрансфер.

Синтакса

1. Превуците

стартДраг: (догађај, производ)
{
евент.датаТрансфер.дропЕффецт='помери'
евент.датаТрансфер.еффецтАлловед='премести'
евент.датаТрансфер.сетДата(‘продуцтИД’, продуцт.ид)
}

Објашњење

У горњој синтакси превлачења, морамо да сачувамо ид производа и превлачимо користећи функцију преноса података, а овде такође помињемо да ће догађај превлачења бити премештен.

2. Испустите

онДроп (догађај, производ)
{
Цонст продуцт_ИД=евент.датаТрансфер.гетДата(‘продуцтИД’)
Константни производ=тхис.продуцт.финд(продуцт=продуцт.ид==продуцтИД)
продуцт.лист=листа
}

Објашњење

У горњој синтакси, преузимамо сачувани ИД производа да бисмо могли да му правилно приступимо.

Како превлачење и испуштање функционише у Вуе.јс?

  1. Морамо да инсталирамо Ноде.јс 10.к и новије на ваш систем и то можете да потврдите коришћењем команде ноде -в у вашем терминалу.
  2. Морамо да инсталирамо најновију верзију Вуе-а на ваш систем користећи команду нпм и -г @вуе/цли.
  3. Затим креирајте пројекат користећи вуе да бисте креирали име пројекта.
  4. Морамо да инсталирамо пакете за превлачење у ваш пројекат користећи нпм и -С вуедраггабле.
  5. Требало нам је основно знање о Ноде.јс.
  6. Требало нам је основно знање о Вуе.јс-у и његовим компонентама.
  7. Уз помоћ Вуе.јс драг анд дроп, изводимо различите операције.

Пре него што објаснимо морамо да знамо догађај превлачења и испуштања на следећи начин.

Вуе.јс обезбеђује укупно осам типова превлачења и испуштања догађаја у АПИ-ју и можемо их применити у нашој апликацији.

  • Драг: Догађај превлачења се користи за превлачење ставке.
  • драгстарт: Догађај драгстарт се користи за почетак превлачења ставке која се може превући.
  • драгенд: Догађај превлачења се користи да прикаже крајеве превлачења.
  • драгентер: Догађај драгентер се користи када се превучена ставка унесе у зону за испуштање.
  • драглеаве: Догађај драглеаве се користи када оставимо превучену ставку.
  • драговер: Драговер догађај који користимо када се превучена ставка помери.
  • дроп: Догађај испуштања се користи када испустимо превучену ставку.
  • Објекат преноса података: Објекат датаТрансфер је најкориснији објекат у АПИ-ју за превлачење и испуштање. Овај објекат даје дозволу за почетак превлачења ставке и приступ јој када испустимо

Пропертиес оф датаТрансфер Објецт

  • дропЕффецт: Овај дропЕффецт се користи за приказ текуће операције превлачења и испуштања.
  • еффецтАлловед: Ово такође показује операцију превлачења и испуштања.
  • сетДата: Ово се користи за додавање вредности објектима датаТрансфер.
  • гетДата: Користи се за преузимање сачуваних вредности.

Пример Вуе.јс Драг анд Дроп

Да видимо примере како функционише превлачење и испуштање ради бољег разумевања. Прво, креирамо нови пројекат са именом днд у коме смо креирали две различите компоненте на следећи начин.

Име прве компоненте као Табле.вуе код компоненте Табле на следећи начин.

Шифра:


":ид=ид
""цласс=табле
"@драговер.превент
"@дроп.превент=дроп
"><бр /

Помозите развоју веб локације, дељење чланка са пријатељима!

Категорија:

Програмски језици