چگونه کامپوننت های Drag and Drop را در React بسازیم

یک ویژگی کشیدن و رها کردن صاف می تواند به افزودن پولیش و بهبود قابلیت استفاده برنامه های شما کمک کند.

آیا تا به حال خواسته اید قابلیت کشیدن و رها کردن را به اجزای React خود اضافه کنید؟ آنقدرها هم که فکر می کنید سخت نیست.

کشیدن و رها کردن روشی برای جابجایی یا دستکاری عناصر روی صفحه با استفاده از ماوس یا پد لمسی است. این برای مرتب کردن مجدد لیستی از موارد یا انتقال موارد از یک لیست به لیست دیگر عالی است.

می‌توانید اجزای drag and drop را در React با استفاده از یکی از دو روش بسازید: ویژگی‌های داخلی یا ماژول شخص ثالث.

روش های مختلف برای پیاده سازی Drag and Drop در React

دو راه برای پیاده سازی کشیدن و رها کردن در React وجود دارد: استفاده از ویژگی های داخلی React یا استفاده از یک ماژول شخص ثالث. با ایجاد یک برنامه React شروع کنید، سپس روش مورد نظر خود را انتخاب کنید.

روش 1: استفاده از ویژگی های داخلی

در React، می‌توانید از رویداد onDrag برای ردیابی زمانی که کاربر یک عنصر را می‌کشد و رویداد onDrop برای ردیابی زمانی که آن عنصر را رها می‌کند، استفاده کنید. همچنین می توانید از رویدادهای onDragStart و onDragEnd برای ردیابی زمان شروع و توقف کشیدن استفاده کنید.

برای اینکه یک عنصر قابل کشیدن باشد، می توانید ویژگی dragable را روی true تنظیم کنید. مثلا:

import React, { Component } from 'react';
 
class MyComponent extends Component {
  render() {
    return (
      <div
        draggable
        onDragStart={this.handleDragStart}
        onDrag={this.handleDrag}
        onDragEnd={this.handleDragEnd}
      >
        Drag me!
      </div>
    );
  }
}
 
export default MyComponent;

برای اینکه یک عنصر قابل رها کردن باشد، می توانید متدهای handleDragStart، handleDrag و handleDragEnd را ایجاد کنید. این روش ها زمانی اجرا می شوند که کاربر عنصر را بکشد و زمانی که آن را رها کند. مثلا:

import React, { Component } from 'react';
 
class MyComponent extends Component {
  handleDragStart(event) {
      // This method runs when the dragging starts
      console.log("Started")
  }
  
  handleDrag(event) {
      // This method runs when the component is being dragged
      console.log("Dragging...")
  }
  
  handleDragEnd(event) {
      // This method runs when the dragging stops
      console.log("Ended")
  }
  
  render() {
    return (
      <div
        draggable
        onDragStart={this.handleDragStart}
        onDrag={this.handleDrag}
        onDragEnd={this.handleDragEnd}
      >
        Drag me!
      </div>
    );
  }
}
 
export default MyComponent;

در کد بالا، سه روش برای مدیریت کشیدن یک عنصر وجود دارد: handleDragStart، handleDrag و handleDragEnd. div یک ویژگی قابل کشیدن دارد و ویژگی‌های onDragStart، onDrag و onDragEnd را به توابع مربوطه تنظیم می‌کند.

وقتی عنصر را بکشید، ابتدا متد handleDragStart اجرا می شود. اینجاست که می‌توانید هر تنظیماتی را که نیاز دارید، مانند تنظیم داده‌ها برای انتقال، انجام دهید.

سپس، در حالی که عنصر را می کشید، متد handleDrag به طور مکرر اجرا می شود. اینجاست که می‌توانید هر به‌روزرسانی مانند تنظیم موقعیت عنصر را انجام دهید.

در نهایت، زمانی که عنصر را رها می کنید، متد handleDragEnd اجرا می شود. این جایی است که می توانید هر پاکسازی لازم را انجام دهید، مانند بازنشانی داده هایی که منتقل کرده اید.

همچنین می‌توانید در onDragEnd() کامپوننت را در اطراف صفحه حرکت دهید. برای این کار باید ویژگی style کامپوننت را تنظیم کنید. مثلا:

import React, { Component, useState } from 'react';
 
function MyComponent() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
 
  const handleDragEnd = (event) => {
    setX(event.clientX);
    setY(event.clientY);
  };
 
  return (
    <div
      draggable
      onDragEnd={handleDragEnd}
      style={{
        position: "absolute",
        left: x,
        top: y
      }}
    >
      Drag me!
    </div>
  );
}
 
export default MyComponent;

کد، قلاب useState را برای ردیابی موقعیت x و y جزء فراخوانی می کند. سپس در متد handleDragEnd موقعیت x و y را به روز می کند. در نهایت، می‌توانید ویژگی style کامپوننت را طوری تنظیم کنید که آن را در موقعیت‌های x و y جدید قرار دهد.

روش 2: استفاده از ماژول شخص ثالث

اگر نمی خواهید از ویژگی های داخلی React استفاده کنید، می توانید از یک ماژول شخص ثالث مانند react-drag-and-drop استفاده کنید. این ماژول یک پوشش مخصوص React در اطراف API کشیدن و رها کردن HTML5 ارائه می دهد.

برای استفاده از این ماژول، ابتدا باید آن را با استفاده از npm نصب کنید:

npm install react-drag-and-drop --save

سپس، می توانید از آن در کامپوننت های React خود استفاده کنید:

import React, { Component } from 'react';
import { Draggable, Droppable } from 'react-drag-and-drop';
 
class MyComponent extends Component {
  render() {
    return (
      <div>
        <Draggable type="foo" data="bar">
          <div>Drag me!</div>
        </Draggable>
        
        <Droppable types={['foo']} onDrop={this.handleDrop}>
          <div>Drop here!</div>
        </Droppable>
      </div>
    );
  }
  
  handleDrop(data, event) {
    // This method runs when the data drops
    console.log(data); // 'bar'
  }
}
 
export default MyComponent;

با وارد کردن اجزای Draggable و Droppable از ماژول react-drag-and-drop شروع کنید. سپس، از این اجزا برای ایجاد یک عنصر قابل کشیدن و یک عنصر قابل رها کردن استفاده کنید.

مولفه Draggable یک نوع prop را می‌پذیرد که نوع داده‌ای را که مؤلفه نشان می‌دهد و یک data prop را که داده‌هایی را برای انتقال مشخص می‌کند، مشخص می‌کند. توجه داشته باشید که نوع یک نام سفارشی است که می‌توانید برای پیگیری اینکه کدام مؤلفه در یک رابط چند مؤلفه است، انتخاب کنید.

مؤلفه Droppable از یک type prop برای تعیین انواع داده‌هایی که می‌توانید روی آن رها کنید، استفاده می‌کند. همچنین دارای یک پایه onDrop است که عملکرد برگشت تماس را مشخص می کند که زمانی که یک کامپوننت را روی آن می اندازید اجرا می شود.

وقتی کامپوننت قابل کشیدن را روی dropable رها می کنید، متد handleDrop اجرا می شود. این جایی است که می توانید هر پردازشی را که نیاز دارید با داده ها انجام دهید.

نکاتی برای ساخت اجزای DnD کاربرپسند

چند کار وجود دارد که می توانید برای کاربرپسندتر کردن اجزای کشیدن و رها کردن خود انجام دهید.

ابتدا باید بازخورد بصری زمانی که یک عنصر در حال کشیدن است ارائه دهید. به عنوان مثال، می توانید شفافیت عنصر را تغییر دهید یا یک حاشیه اضافه کنید. برای افزودن جلوه های بصری می توانید از CSS معمولی یا tailwind CSS در برنامه React خود استفاده کنید.

دوم، باید مطمئن شوید که کاربران شما فقط می توانند عنصر را به یک هدف دراپ معتبر بکشند. به عنوان مثال، می‌توانید ویژگی‌های type را به عنصر اضافه کنید، که انواع مؤلفه‌هایی را که می‌پذیرد مشخص می‌کند.

سوم، شما باید راهی را برای کاربر فراهم کنید تا عملیات کشیدن و رها کردن را لغو کند. برای مثال، می‌توانید دکمه‌ای اضافه کنید که به کاربر اجازه می‌دهد عملیات را لغو کند.

بهبود تجربه کاربری با کشیدن و رها کردن

ویژگی کشیدن و رها کردن نه تنها به بهبود تجربه کاربر کمک می کند، بلکه می تواند به عملکرد کلی برنامه وب شما نیز کمک کند. کاربر اکنون می‌تواند به راحتی ترتیب برخی از داده‌ها را بدون نیاز به بازخوانی صفحه یا گذراندن چندین مرحله دوباره مرتب کند.

همچنین می‌توانید انیمیشن‌های دیگری را در برنامه React خود اضافه کنید تا ویژگی کشیدن و رها کردن را تعاملی‌تر و کاربرپسندتر کنید.

منبع مقاله