Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.

Да ли сте икада желели да додате функцију превлачења и испуштања вашим Реацт компонентама? Није тако тешко као што мислите.

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

Можете да направите компоненте за превлачење и испуштање у Реацт-у користећи било коју од две методе: уграђене функције или модул треће стране.

Различити начини за имплементацију Драг анд Дроп у Реацт-у

Постоје два начина за имплементацију превлачења и отпуштања у Реацт-у: коришћењем уграђених функција Реацт-а или коришћењем модула треће стране. Старт би креирање Реацт апликације, а затим изаберите жељени метод.

Метод 1: Коришћење уграђених функција

У Реацт-у можете да користите догађај онДраг да бисте пратили када корисник превлачи елемент, а онДроп догађај да бисте пратили када га испусте. Такође можете користити догађаје онДрагСтарт и онДрагЕнд да бисте пратили када превлачење почиње и престаје.

instagram viewer

Да бисте елемент учинили превлачењем, можете поставити атрибут за превлачење на труе. На пример:

увоз Реагујте, { Компонента } из 'реаговати';
класаМиЦомпонентпротежеСаставни део{
 дати, пружити() {
повратак (
<див
 превлачење
 онДрагСтарт={ово.хандлеДрагСтарт}
 онДраг={ово.хандлеДраг}
 онДрагЕнд={ово.хандлеДрагЕнд}
>
 Повуци ме!
</div>
 );
 }
}
извозУобичајено МиЦомпонент;

Да бисте омогућили испуштање елемента, можете креирати методе хандлеДрагСтарт, хандлеДраг и хандлеДрагЕнд. Ове методе ће се покренути када корисник повуче елемент и када га испусти. На пример:

увоз Реагујте, { Компонента } из 'реаговати';
класаМиЦомпонентпротежеСаставни део{
 хандлеДрагСтарт (догађај) {
// Овај метод се покреће када превлачење почне
 цонсоле.лог("Почело")
 }


хандлеДраг (догађај) {
// Овај метод се покреће када се компонента превлачи
 цонсоле.лог("Превлачење...")
 }


хандлеДрагЕнд (догађај) {
// Овај метод се покреће када се превлачење заустави
 цонсоле.лог("Завршено")
 }


дати, пружити() {
повратак (
<див
 превлачење
 онДрагСтарт={ово.хандлеДрагСтарт}
 онДраг={ово.хандлеДраг}
 онДрагЕнд={ово.хандлеДрагЕнд}
>
 Повуци ме!
</div>
 );
 }
}
извозУобичајено МиЦомпонент;

У горњем коду постоје три методе за руковање превлачењем елемента: хандлеДрагСтарт, хандлеДраг и хандлеДрагЕнд. Див има атрибут који се може превући и поставља својства онДрагСтарт, онДраг и онДрагЕнд на њихове одговарајуће функције.

Када превучете елемент, метода хандлеДрагСтарт ће се прво покренути. Овде можете да урадите било које подешавање које треба да урадите, као што је подешавање података за пренос.

Затим, хандлеДраг метода се понавља док превлачите елемент. Овде можете извршити било каква ажурирања као што је подешавање положаја елемента.

Коначно, када испустите елемент, покреће се метода хандлеДрагЕнд. Овде можете да урадите било које чишћење које треба да урадите, као што је ресетовање података које сте пренели.

Такође можете да померате компоненту по екрану у онДрагЕнд(). Да бисте то урадили, мораћете да подесите својство стила компоненте. На пример:

увоз Реагујте, { Компонента, усеСтате } из 'реаговати';
функцијаМиЦомпонент() {
конст [к, сетКс] = усеСтате(0);
конст [и, сетИ] = усеСтате(0);


конст хандлеДрагЕнд = (догађај) => {
сетКс(догађај.цлиентКс);
сетИ(догађај.цлиентИ);
 };


повратак (
<див
 превлачење
 онДрагЕнд={хандлеДрагЕнд}
 стиле={{
 позиција: "апсолутна",
 лево: к,
 врх: и
 }}
>
 Повуци ме!
</div>
 );
}
извозУобичајено МиЦомпонент;

Код позива закачицу усеСтате да прати к и и позицију компоненте. Затим, у методи хандлеДрагЕнд, ажурира к и и позицију. Коначно, можете подесити својство стила компоненте да је позиционирате на новим к и и позицијама.

Метод 2: Коришћење модула треће стране

Ако не желите да користите уграђене функције Реацт-а, можете користити модул треће стране као што је реаговати-повући-и-испустити. Овај модул обезбеђује Реацт-специфичан омотач око ХТМЛ5 превуци и испусти АПИ.

Да бисте користили овај модул, прво морате да га инсталирате користећи нпм:

нпм инсталирај реаговати-повући-и-кап--сачувати

Затим га можете користити у својим Реацт компонентама:

увоз Реагујте, { Компонента } из 'реаговати';
увоз { Превлачење, испуштање } из 'реагуј-повуци-и-испусти';
класаМиЦомпонентпротежеСаставни део{
 дати, пружити() {
повратак (
<див>
<Тип који се може превући="фоо" дата="бар">
<див>Повуци ме!</div>
</Draggable>


<Типови који се могу испустити={['фоо']} онДроп={тхис.хандлеДроп}>
<див>Спусти овде!</div>
</Droppable>
</div>
 );
 }


хандлеДроп (подаци, догађај) {
// Овај метод се покреће када подаци падну
конзола.лог (подаци); // 'бар'
 }
}
извозУобичајено МиЦомпонент;

Започните увозом компоненти које се могу превући и одбацити из модула реаговања повуци и испусти. Затим користите ове компоненте да бисте креирали елемент који се може превући и елемент који се може спустити.

Компонента Драггабле прихвата типски проп, који специфицира тип података који компонента представља, и дата проп који специфицира податке за пренос. Имајте на уму да је тип прилагођено име које можете изабрати да бисте пратили која је која компонента у вишекомпонентном интерфејсу.

Компонента која се може испустити користи типове проп за специфицирање типова података које можете да испустите на њу. Такође има онДроп проп, који специфицира функцију повратног позива која ће се покренути када спустите компоненту на њега.

Када спустите компоненту која се може превући на испуштање, покренуће се метода хандлеДроп. Овде можете обавити било коју обраду података коју требате.

Савети за прављење ДнД компоненти прилагођених кориснику

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

Прво, требало би да пружите визуелну повратну информацију када се елемент превлачи. На пример, можете променити непрозирност елемента или додати ивицу. За додавање визуелних ефеката можете користити нормалан ЦСС или таилвинд ЦСС у вашој Реацт апликацији.

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

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

Побољшајте корисничко искуство помоћу превлачења и испуштања

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

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