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

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.

Nguồn

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.

See the Pen To do List [Drag and Drop] by Gabriel Ferreira (@gabrielferreira) on CodePen.

Nguồn

See the Pen simple drag and drop example — week 36/52 by Mert Cukuren (@knyttneve) on CodePen.

Nguồn

See the Pen Drag and Drop Game by Coding Journey (@Coding_Journey) on CodePen.

Nguồn

See the Pen Draggable div || Drag and Drop by Zayn (@ZaynAlaoudi) on CodePen.

Nguồn

See the Pen Drag and Drop by Larry Geams Parangan (@larrygeams) on CodePen.

Nguồn

See the Pen HTML5 Drag and Drop by Jason (@jdigi) on CodePen.

Nguồn

See the Pen Drag & Drop Grid Layout in React by Tim Ramage (@tjramage) on CodePen.

Nguồn

See the Pen Drag and Drop Coloring by Blake Bowen (@osublake) on CodePen.

Nguồn

See the Pen Simple Drag and Drop Lean Kanban Board Tool by Nikki Pantony (@nikkipantony) on CodePen.

Nguồn

See the Pen Drag and Drop by Stuart Urback (@Stuwert) on CodePen.

Nguồn

See the Pen Kevin McCallister's Grocery List by Ryan Mulligan (@hexagoncircle) on CodePen.

Nguồn

See the Pen Html5: Drag and Drop by Larry Geams Parangan (@larrygeams) on CodePen.

Nguồn

See the Pen CSS Counters drag-and-drop demonstration by SitePoint (@SitePoint) on CodePen.

Nguồn

See the Pen jQuery Ui Drag Drop with Animation by Max Smith (@mxg) on CodePen.

Nguồn

See the Pen Draggable Panels Bootstrap test by Nate (@nonstopnate) on CodePen.

Nguồn

See the Pen HTML Drag-and-drop by Justin (@harwoodjp) on CodePen.

Nguồn

See the Pen Drag and Drop Ball by Jack Rugile (@jackrugile) on CodePen.

Nguồn

See the Pen Simple drag and drop with JavaScript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

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

Nguồn

Nguồn

Nguồn

Nguồn

Nguồn

Nguồn

Nguồn

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