Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo chức năng Drag and Drop (Kéo và Thả) Cho Trang Web bằng HTML, CSS và Javascript nhé!
Xây Dựng Chức Năng Drag And Drop
Trước khi đi vào thực hiện thì mình xin giới thiệu sơ qua về một số sự kiện để chúng ta có thể dễ dàng hiểu hơn khi tạo chức năng này nhé!
ondragstart | Kích hoạt sự kiện khi người dùng bắt đầu kéo đối tượng. |
ondragenter | Kích hoạt khi con trỏ chuột lần đầu di chuyển qua element trong khi nó đang kéo 1 đối tượng khác. |
ondragend | Kích hoạt khi kết thúc thao tác kéo đối tượng. |
ondragover | Kích hoạt khi con trỏ chuột di chuyển qua element khi đang kéo 1 đối tượng khác. |
ondragleave | Kích hoạt khi đối tượng rời khỏi mục tiêu thả hợp lệ. |
ondrop | Kích hoạt khi đối tượng được thả vào mục tiêu thả hợp lệ. |
ondrag | Kích hoạt khi một đối tượng được kéo. |
Bây giờ chúng ta sẽ đi vào tìm hiểu cách tạo chức năng drag and drop thông qua đoạn mã dưới đây nhé!
HTML:
<p>Bạn hãy kéo hình ảnh vào ô phía trên:</p>
<!-- Tạo ô để thả hình ảnh-->
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
</div>
<!--hình ảnh chứa sự kiện để thực hiện drag and drop-->
<img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1596598262/lzflihbv1tcwlyv4cnuc.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="180" height="180" alt="Hình Ảnh">
CSS
#dropBox {
width: 200px;
height: 200px;
border: 2px dashed white;
background: CornflowerBlue;
text-align: center;
margin: 20px 0;
color: orange;
}
#dropBox img {
margin: 10px;
}
Tiếp theo chúng ta sẽ thêm Javascript để thực hiện chức năng drag and drop cho nó nhé!
Javascript
function dragStart(e) {
/*Thiết lập tính năng cho phép di chuyển đối tượng*/
e.dataTransfer.effectAllowed = "move";
/* thiết lập giá trị và loại đối tượng cho dữ liệu được drag and drop*/
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
/*Ngăn chặn việc xử lý mặc định của trình duyệt*/
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
/*hủy sự kiện cho các hành động khác*/
e.stopPropagation();
e.preventDefault();
/*Truy xuất kéo dữ liệu theo loại*/
var data = e.dataTransfer.getData("Text");
/*Thêm hình ảnh được kéo vào ô chúng ta đã tạo từ trước*/
e.target.appendChild(document.getElementById(data));
}
Và kết quả cuối cùng bạn xem ở bên dưới nhé (Bạn nên chuyển sang chế độ scren 0.5x hay 0.25x để thấy kết quả tốt hơn nha):
See the Pen tạo chức năng drag and drop by haycuoilennao19 (@haycuoilennao19) on CodePen.
Các Ví Dụ Về Drag And Drop
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Cách Tạo Drag Và Drop HTML

Kết quả bạn xem bên dưới nha.
See the Pen To do List [Drag and Drop] by Gabriel Ferreira (@gabrielferreira) on CodePen.
Cách Tạo Drag And Drop Javascript
Kết quả bạn xem bên dưới nha.
See the Pen simple drag and drop example — week 36/52 by Mert Cukuren (@knyttneve) on CodePen.
Cách Tạo Drag And Drop Image

Kết quả bạn xem bên dưới nha.
See the Pen Drag and Drop Game by Coding Journey (@Coding_Journey) on CodePen.
Thiết Kế Drag And Drop CSS3 Javascript

Kết quả bạn xem bên dưới nha.
See the Pen Draggable div || Drag and Drop by Zayn (@ZaynAlaoudi) on CodePen.
Thiết Kế Drag And Drop UI

Kết quả bạn xem bên dưới nha.
See the Pen Drag and Drop by Larry Geams Parangan (@larrygeams) on CodePen.
Cách Tạo Jquery Drag And Drop

Kết quả bạn xem bên dưới nha.
See the Pen HTML5 Drag and Drop by Jason (@jdigi) on CodePen.
Cách Tạo React Drag And Drop

Kết quả bạn xem bên dưới nha.
See the Pen Drag & Drop Grid Layout in React by Tim Ramage (@tjramage) on CodePen.
Cách Tạo HTML5 Drag And Drop

Kết quả bạn xem bên dưới nha.
See the Pen Drag and Drop Coloring by Blake Bowen (@osublake) on CodePen.
Thiết Kế Drag And Drop Bằng Thư Viện Dragula.js

Kết quả bạn xem bên dưới nha.
See the Pen Simple Drag and Drop Lean Kanban Board Tool by Nikki Pantony (@nikkipantony) on CodePen.
Thiết Kế Javascript Drag And Drop

Kết quả bạn xem bên dưới nha.
See the Pen Drag and Drop by Stuart Urback (@Stuwert) on CodePen.
Thiết Kế Angular Drag And Drop

Kết quả bạn xem bên dưới nha.
See the Pen Kevin McCallister's Grocery List by Ryan Mulligan (@hexagoncircle) on CodePen.
Cách Tạo Drag And Drop Jquery UI

Kết quả bạn xem bên dưới nha.
See the Pen Html5: Drag and Drop by Larry Geams Parangan (@larrygeams) on CodePen.
Thiết Kế UI Drag And Drop HTML5

Kết quả bạn xem bên dưới nha.
See the Pen CSS Counters drag-and-drop demonstration by SitePoint (@SitePoint) on CodePen.
Cách Tạo Animation Cho Drag And Drop HTML5

Kết quả bạn xem bên dưới nha.
See the Pen jQuery Ui Drag Drop with Animation by Max Smith (@mxg) on CodePen.
Thiết Kế Drag And Drop Bootstrap

Kết quả bạn xem bên dưới nha.
See the Pen Draggable Panels Bootstrap test by Nate (@nonstopnate) on CodePen.
Thiết Kế Javascript UI Drag And Drop List

Kết quả bạn xem bên dưới nha.
See the Pen HTML Drag-and-drop by Justin (@harwoodjp) on CodePen.
Cách Tạo Drag And Drop JS

Kết quả bạn xem bên dưới nha.
See the Pen Drag and Drop Ball by Jack Rugile (@jackrugile) on CodePen.
Cách Tạo Drag And Drop HTML Cho Website

Kết quả bạn xem bên dưới nha.
See the Pen Simple drag and drop with JavaScript by haycuoilennao19 (@haycuoilennao19) on CodePen.
Các Thư Viện Drag And Drop
Để giảm công sức code cũng như làm được nhiều hiệu ứng chuyển động đẹp cho chức năng drag and drop (kéo và thả) thì mình xin giới thiệu một số thư viện Javascript được sử dụng phổ biến để tạo chức năng này nhé!
Thư Viện Draggable

Thư Viện SortableJS

Thư Viện Dragula

Thư Viện Draggabilly

Thư Viện DRAGON DROP

Thư Viện table-dragger

Thư Viện Interact.js

Thư Viện HTML5 Sortable

Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những cách tạo drag and drop hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!