Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Chức Năng Drag And Drop Và 18 Ví Dụ Thực Tế Trong thiết Kế Web

Cách Tạo Chức Năng Drag And Drop Và 18 Ví Dụ Thực Tế Trong thiết Kế Web


Ngày 18 Tháng 8 Năm 2020

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é!

ondragstartKích hoạt sự kiện khi người dùng bắt đầu kéo đối tượng.
ondragenterKí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.
ondragendKích hoạt khi kết thúc thao tác kéo đối tượng.
ondragoverKích hoạt khi con trỏ chuột di chuyển qua element khi đang kéo 1 đối tượng khác.
ondragleaveKích hoạt khi đối tượng rời khỏi mục tiêu thả hợp lệ.
ondropKích hoạt khi đối tượng được thả vào mục tiêu thả hợp lệ.
ondragKí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

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.

Nguồn

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.

Nguồn

Cách Tạo Drag And Drop Image

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.

Nguồn

Thiết Kế Drag And Drop CSS3 Javascript

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.

Nguồn

Thiết Kế Drag And Drop UI

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.

Nguồn

Cách Tạo Jquery Drag And Drop

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.

Nguồn

Cách Tạo React Drag And Drop

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.

Nguồn

Cách Tạo HTML5 Drag And Drop

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.

Nguồn

Thiết Kế Drag And Drop Bằng Thư Viện Dragula.js

Thiết Kế Drag And Drop

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.

Nguồn

Thiết Kế Javascript Drag And Drop

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.

Nguồn

Thiết Kế Angular Drag And Drop

Thiết Kế Javascript 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.

Nguồn

Cách Tạo Drag And Drop Jquery UI

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.

Nguồn

Thiết Kế UI Drag And Drop HTML5

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.

Nguồn

Cách Tạo Animation Cho Drag And Drop HTML5

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.

Nguồn

Thiết Kế Drag And Drop Bootstrap

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.

Nguồn

Thiết Kế Javascript UI Drag And Drop List

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.

Nguồn

Cách Tạo Drag And Drop JS

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.

Nguồn

Cách Tạo Drag And Drop HTML Cho Website

 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.

Nguồn

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

Draggable

Nguồn

Thư Viện SortableJS

SortableJS

Nguồn

Thư Viện Dragula

Dragula

Nguồn

Thư Viện Draggabilly

Draggabilly

Nguồn

Thư Viện DRAGON DROP

DRAGON DROP

Nguồn

Thư Viện table-dragger

table-dragger

Nguồn

Thư Viện Interact.js

Interact.js

Nguồn

Thư Viện HTML5 Sortable

HTML5 Sortable

Nguồn

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ẻ!