[Share Code] Kéo thả Phần tử bằng Javascript

Trong hướng dẫn này, chúng ta sẽ tạo một menu điều hướng có thể kéo thả bằng HTML, CSS và JavaScript. Menu này cho phép người dùng sắp xếp lại các mục điều hướng chỉ bằng cách kéo và thả. Thiết kế bao gồm hiệu ứng chuyển màu thẩm mỹ, hoạt ảnh mượt mà và hiệu ứng glassmorphism, giúp giao diện trở nên bắt mắt. Chỉ với vài dòng JavaScript, chúng ta có thể kích hoạt tính năng kéo-thả một cách trơn tru mà không cần sử dụng thư viện bên ngoài. Hãy cùng bắt tay vào xây dựng menu điều hướng phong cách và thân thiện với người dùng này!

Tải về file Source đầy đủ tại đây (Google Drive)

Cấu trúc HTML

Cấu trúc HTML bao gồm một menu điều hướng bên trong một thẻ <div>.

• Thẻ <div class="container"> là phần bao bọc chính, chứa một danh sách không có thứ tự (<ul>) với sáu mục (<li>).
• Mỗi mục <li> đại diện cho một liên kết điều hướng như Home, Blog, Services, About, Contact, Help.
• Bên trong mỗi <li> có một biểu tượng từ Ionicons và nhãn văn bản, giúp menu trở nên trực quan hơn.
• Thuộc tính draggable="true" được thêm vào mỗi <li>, cho phép người dùng kéo và sắp xếp lại các mục.

Tính năng kéo-thả này được hỗ trợ sẵn trong HTML mà không cần thư viện JavaScript bổ sung.

• Biểu tượng Ionicons được nhập vào bằng thẻ <script> từ CDN của Ionicons.
• Các biểu tượng này được tải động và có thể tùy chỉnh qua class name.
• Mỗi phần tử <ion-icon> được gán một tên biểu tượng tương ứng với từng mục menu.

CSS – Tạo giao diện hiện đại

Tệp CSS giúp cải thiện giao diện menu bằng các hiệu ứng hiện đại như gradient, bóng đổ và hoạt ảnh mượt mà.

• Font chữ Poppins được nhập vào từ Google Fonts bằng @import, tạo phong cách chuyên nghiệp.
• Bộ chọn toàn cục * đặt margin: 0; padding: 0; box-sizing: border-box; để đảm bảo bố cục gọn gàng.
• Phần html, body được đặt display: grid; place-items: center; giúp menu luôn căn giữa màn hình.
• Nền trang có hiệu ứng chuyển màu chéo linear-gradient(135deg), pha trộn các sắc tím tạo hiệu ứng đẹp mắt.
• .container áp dụng glassmorphism bằng backdrop-filter: blur(10px); giúp giao diện trông hiện đại hơn.
• Danh sách <ul> được loại bỏ padding và margin mặc định để đảm bảo bố cục gọn gàng.
• Mỗi mục <li> có thiết kế bo tròn, nền chuyển màu mượt mà, chữ trắng để đảm bảo độ tương phản cao.
• Biểu tượng .icon bên trong <li> có font-size: 1.2rem; và khoảng cách hợp lý để căn chỉnh tốt hơn.
• Hiệu ứng hover: Khi di chuột vào mục menu (li:hover), nó sẽ phóng to nhẹ và đổ bóng để tạo cảm giác tương tác.
• Lớp .dragging giúp giảm độ mờ (opacity) và thay đổi đường viền thành nét đứt màu trắng khi kéo thả.
• Lớp .drop-target làm nổi bật vị trí có thể thả bằng viền nét đứt màu trắng.
• Hoạt ảnh mượt mà được tạo bằng transition: transform 0.2s, box-shadow 0.2s; khi người dùng tương tác với menu.

Nhờ CSS, menu kéo-thả trở nên bắt mắt, tương tác tốt và hiện đại.

JavaScript – Kích hoạt tính năng kéo-thả

Mã JavaScript giúp menu hoạt động bằng cách xử lý các sự kiện kéo-thả trên các phần tử <li>.

• Đầu tiên, biến draggedItem được đặt là null để lưu phần tử hiện đang được kéo.
• Sự kiện dragstart: Khi một mục được kéo, nó được gán vào draggedItem và thêm class .dragging để thay đổi giao diện.
• Sự kiện dragover: Ngăn chặn hành vi mặc định để cho phép thả, đồng thời thêm class .drop-target để làm nổi bật vị trí có thể thả.
• Sự kiện dragleave: Nếu mục bị kéo ra khỏi vùng thả, lớp .drop-target sẽ bị xóa.
• Sự kiện drop: Khi thả mục kéo vào danh sách, script sẽ chèn nó vào vị trí trước hoặc sau mục hiện có, tùy thuộc vào vị trí của nó.
• Sự kiện dragend: Xóa class .dragging và bất kỳ highlight .drop-target nào còn sót lại.

Nhờ đoạn JavaScript ngắn gọn này, chúng ta có một hệ thống kéo-thả trực quan, mượt mà mà không cần thư viện bên ngoài.

Tóm lại

Hướng dẫn này giúp bạn xây dựng một menu kéo-thả hiện đại, bắt mắt với HTML, CSS và JavaScript thuần. Thiết kế dựa trên glassmorphism, hiệu ứng gradient, hoạt ảnh mượt mà, và tính năng kéo-thả trực quan mà không cần dùng thư viện bên ngoài.