Cách tạo một Draggable Components với React

Tram Ho

Hello anh em , lại là mình đây 😎😎

Đã bảo giờ khi làm một project , enh em gặp phải task là di chuyển các component trên màn hình không nhỉ ??? Hôm nay mình sẽ hướng dẫn anh em làm một Draggable đơn giản thôi nhé bằng cách sử dụng thư viện https://www.npmjs.com/package/react-draggable nhé

Let’s get it

Bước 1 : Cùng tạo app nào :

Sau đó chúng ta tiếp tục cái package :

Bước 2 : Anh em tiếp tục import :

Khi cài xong rồi, trong App.js, anh em import cho mình như sau :

Sau khi import xong chúng ta tiếp tục bao quanh div bằng thẻ Draggable của họ :

Style nhẹ một tị nhờ :

Nhanh, gọn, lẹ anh em sẽ được kết quả như sau :

1.Nếu anh em muốn biết tọa độ của mình kéo :

  • Đơn giản thôi chúng ta sử dụng onDrag :

Ta sẽ được như sau :

2. Nếu muốn qui định kéo theo chiều ngang hay dọc hoặc không kéo :

Ở đây họ cũng đã hộ trợ tận răng như sau :

  • axis=”x”: Component chỉ có thể kéo theo chiều ngang.
  • axis=”y”: Component chỉ có thể kéo theo chiều dọc.
  • axis=”none”: Component không thể kéo nữa.
    Ví dụ trường hợp axis=”x” nhé :

Kết quả như sau :

3. Hay là chỉ muốn tác động vào phần nào thì phần đó mới được kéo ?

Ta làm như sau :

Kết quả :

Kết bài :

  • Trên đây là những hướng dẫn cwo bản của mình về package này, nếu giúp ích được gì cho bạn trong việc code cũng như làm Task thì hãy ủng hộ mình nhiều hơn nữa bằng cách chia sẻ và upvote bài viết này nhé. Cảm ơn mọi người.

P/S : Mình cũng nghịch một cái demo nho nhỏ , mọi người có thể xem ảnh và tự nghĩ cách code nhé =))

Nếu mọi người muốn tìm hiêủ thêm thì mình có để ở dưới link tài liệu đây :
https://www.npmjs.com/package/react-draggable

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo