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

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 Chức Năng Drag And Drop Và 18 Ví Dụ Thực Tế Trong thiết Kế Web

Xây Dựng Chức Năng Drag And Drop

HTML:

CSS

Javascript

Các Ví Dụ Về Drag And Drop

Cách Tạo Drag Và Drop HTML

Cách Tạo Drag And Drop Javascript

Cách Tạo Drag And Drop Image

Thiết Kế Drag And Drop CSS3 Javascript

Thiết Kế Drag And Drop UI

Cách Tạo Jquery Drag And Drop

Cách Tạo React Drag And Drop

Cách Tạo HTML5 Drag And Drop

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

Thiết Kế Javascript Drag And Drop

Thiết Kế Angular Drag And Drop

Cách Tạo Drag And Drop Jquery UI

Thiết Kế UI Drag And Drop HTML5

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

Thiết Kế Drag And Drop Bootstrap

Thiết Kế Javascript UI Drag And Drop List

Cách Tạo Drag And Drop JS

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

Các Thư Viện Drag And Drop

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:

CSS HTML Javascript Nguồn Lập Trình

Góc trả lời