Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор.

Искали ли сте някога да добавите функция за плъзгане и пускане към вашите React компоненти? Не е толкова трудно, колкото си мислите.

Плъзгане и пускане е начин за преместване или манипулиране на елементи на екрана с помощта на мишка или тъчпад. Той е идеален за пренареждане на списък с елементи или за преместване на елементи от един списък в друг.

Можете да създавате компоненти за плъзгане и пускане в React, като използвате един от двата метода: вградени функции или модул на трета страна.

Различни начини за внедряване на Drag and Drop в React

Има два начина за прилагане на плъзгане и пускане в React: използване на вградените функции на React или използване на модул на трета страна. Започнете от създаване на React приложение, след което изберете предпочитания от вас метод.

Метод 1: Използване на вградени функции

В React можете да използвате събитието onDrag, за да проследите кога потребителят плъзга елемент, и събитието onDrop, за да проследите кога го пуска. Можете също да използвате събитията onDragStart и onDragEnd, за да проследите кога плъзгането започва и спира.

instagram viewer

За да направите елемент с възможност за плъзгане, можете да зададете атрибута за плъзгане на true. Например:

импортиране Реагирайте, {Component} от 'реагира';
класMyComponentсе простираКомпонент{
 рендер() {
връщане (
<див
 влачене
 onDragStart={това.handleDragStart}
 onDrag={това.handleDrag}
 onDragEnd={това.handleDragEnd}
>
 Завлечи ме!
</div>
 );
 }
}
износпо подразбиране MyComponent;

За да направите елемент с възможност за пускане, можете да създадете методите handleDragStart, handleDrag и handleDragEnd. Тези методи ще се изпълняват, когато потребителят плъзне елемента и когато го пусне. Например:

импортиране Реагирайте, {Component} от 'реагира';
класMyComponentсе простираКомпонент{
 handleDragStart (събитие) {
// Този метод се изпълнява, когато плъзгането започне
 console.log("започна")
 }


handleDrag (събитие) {
// Този метод се изпълнява, когато компонентът се влачи
 console.log("Плъзгане...")
 }


handleDragEnd (събитие) {
// Този метод се изпълнява, когато плъзгането спре
 console.log("Приключи")
 }


рендер() {
връщане (
<див
 влачене
 onDragStart={това.handleDragStart}
 onDrag={това.handleDrag}
 onDragEnd={това.handleDragEnd}
>
 Завлечи ме!
</div>
 );
 }
}
износпо подразбиране MyComponent;

В горния код има три метода за обработка на плъзгането на елемент: handleDragStart, handleDrag и handleDragEnd. Div има атрибут с възможност за плъзгане и задава свойствата onDragStart, onDrag и onDragEnd на съответните им функции.

Когато плъзнете елемента, първо ще се изпълни методът handleDragStart. Това е мястото, където можете да направите всяка настройка, която трябва да направите, като например настройка на данните за прехвърляне.

След това методът handleDrag се изпълнява многократно, докато плъзгате елемента. Това е мястото, където можете да правите всякакви актуализации като коригиране на позицията на елемента.

Накрая, когато пуснете елемента, се изпълнява методът handleDragEnd. Това е мястото, където можете да направите всяко почистване, което трябва да направите, като например нулиране на данните, които сте прехвърлили.

Можете също да местите компонента по екрана в onDragEnd(). За да направите това, ще трябва да зададете свойството стил на компонента. Например:

импортиране Реагирайте, {Component, useState} от 'реагира';
функцияMyComponent() {
конст [x, setX] = useState(0);
конст [y, setY] = useState(0);


конст handleDragEnd = (събитие) => {
setX(събитие.clientX);
setY(събитие.clientY);
 };


връщане (
<див
 влачене
 onDragEnd={handleDragEnd}
 стил={{
 позиция: "абсолютен",
 ляво: x,
 отгоре: y
 }}
>
 Завлечи ме!
</div>
 );
}
износпо подразбиране MyComponent;

Кодът извиква куката useState, за да проследи x и y позицията на компонента. След това, в метода handleDragEnd, той актуализира позицията x и y. И накрая, можете да зададете свойството стил на компонента, за да го позиционирате на новите x и y позиции.

Метод 2: Използване на модул на трета страна

Ако не искате да използвате вградените функции на React, можете да използвате модул на трета страна като реакция-плъзгане и пускане. Този модул предоставя специфична за React обвивка около HTML5 API за плъзгане и пускане.

За да използвате този модул, първо трябва да го инсталирате с помощта на npm:

npm Инсталирай реакция-плъзгане-и-изпускайте--спести

След това можете да го използвате във вашите React компоненти:

импортиране Реагирайте, {Component} от 'реагира';
импортиране { Плъзгане, пускане } от 'реагиране на плъзгане и пускане';
класMyComponentсе простираКомпонент{
 рендер() {
връщане (
<див>
<Плъзгащ се тип="Фу" данни="бар">
<див>Завлечи ме!</div>
</Draggable>


<Типове за пускане={['Фу']} onDrop={this.handleDrop}>
<див>Пуснете тук!</div>
</Droppable>
</div>
 );
 }


handleDrop (данни, събитие) {
// Този метод се изпълнява, когато данните паднат
конзола.log (данни); // 'бар'
 }
}
износпо подразбиране MyComponent;

Започнете с импортиране на компонентите с възможност за плъзгане и пускане от модула за реагиране на плъзгане и пускане. След това използвайте тези компоненти, за да създадете елемент с възможност за плъзгане и елемент с възможност за пускане.

Компонентът с възможност за плъзгане приема характеристика за тип, която указва типа данни, които представлява компонентът, и характеристика за данни, която указва данните за прехвърляне. Имайте предвид, че типът е потребителско име, което можете да изберете, за да следите кой компонент кой е в многокомпонентен интерфейс.

Компонентът Droppable използва проп типове, за да посочи типовете данни, които можете да пуснете върху него. Освен това има проп onDrop, който указва функцията за обратно извикване, която ще се изпълнява, когато пуснете компонент върху него.

Когато пуснете плъзгащия се компонент върху пускащия, методът handleDrop ще се изпълни. Това е мястото, където можете да извършите всяка обработка, която трябва да направите с данните.

Съвети за изграждане на удобни за потребителя DnD компоненти

Има няколко неща, които можете да направите, за да направите вашите компоненти за плъзгане и пускане по-лесни за потребителя.

Първо, трябва да предоставите визуална обратна връзка, когато даден елемент се плъзга. Например, можете да промените непрозрачността на елемента или да добавите рамка. За да добавите визуални ефекти, можете да използвате нормален CSS или tailwind CSS във вашето приложение React.

Второ, трябва да се уверите, че вашите потребители могат да плъзгат елемента само до валидна цел за изпускане. Например можете да добавите видове атрибут към елемента, който указва типовете компоненти, които ще приеме.

Трето, трябва да предоставите начин за потребителя да отмени операцията за плъзгане и пускане. Например, можете да добавите бутон, който позволява на потребителя да отмени операцията.

Подобрете потребителското изживяване с плъзгане и пускане

Функцията за плъзгане и пускане не само помага за подобряване на потребителското изживяване, но също така може да помогне за цялостната производителност на вашето уеб приложение. Потребителят вече може лесно да пренареди реда на някои данни, без да се налага да опреснява страницата или да преминава през множество стъпки.

Можете също да добавите други анимации в приложението си React, за да направите функцията за плъзгане и пускане по-интерактивна и удобна за потребителя.