Trò chơi câu đố kéo và thả HTML5

Question

API Kéo và Thả HTML5 có nghĩa là chúng tôi có thể làm cho hầu hết mọi thành phần trên trang của chúng tôi có thể kéo được. Trong bài đăng này, chúng tôi sẽ giải thích những điều cơ bản về kéo và thả

Nội dung chính Show

Tạo nội dung có thể kéo được #
Lắng nghe các sự kiện kéo #
Bắt đầu và kết thúc trình tự kéo và thả #
Thêm các dấu hiệu trực quan bổ sung với .container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}.box { border: 3px solid #666; background-color: #ddd; border-radius: .5em; padding: 10px; cursor: move;}6, .container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}.box { border: 3px solid #666; background-color: #ddd; border-radius: .5em; padding: 10px; cursor: move;}8 và .container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}.box { border: 3px solid #666; background-color: #ddd; border-radius: .5em; padding: 10px; cursor: move;}7 #
Hoàn thành việc thả #
Thêm thuộc tính kéo #
Tải tệp lên bằng cách kéo và thả #
Có thể kéo và thả bằng cách sử dụng html5 không và bằng cách nào?

Tạo nội dung có thể kéo được #

Điều đáng chú ý là trong hầu hết các trình duyệt, lựa chọn văn bản, hình ảnh và liên kết đều có thể kéo được theo mặc định. Ví dụ: nếu bạn kéo một liên kết trên một trang web, bạn sẽ thấy một hộp nhỏ có tiêu đề và URL. Bạn có thể thả hộp này trên thanh địa chỉ hoặc màn hình nền để tạo lối tắt hoặc điều hướng đến liên kết. Để làm cho các loại nội dung khác có thể kéo được, bạn cần sử dụng API kéo và thả HTML5

Để tạo một đối tượng có thể kéo được, hãy đặt

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

0 trên phần tử đó. Gần như mọi thứ đều có thể được kích hoạt bằng cách kéo. hình ảnh, tệp, liên kết, tệp hoặc bất kỳ đánh dấu nào trên trang của bạn

Ví dụ của chúng tôi tạo giao diện để sắp xếp lại các cột đã được bố trí bằng CSS Grid. Đánh dấu cơ bản cho các cột trông như thế này, với mỗi cột có thuộc tính

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

1 được đặt thành

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

2

<div class="container">
  <div draggable="true" class="box">Adiv>
  <div draggable="true" class="box">Bdiv>
  <div draggable="true" class="box">Cdiv>
div>

Đây là CSS cho các thành phần thùng chứa và hộp. Lưu ý rằng CSS duy nhất liên quan đến chức năng kéo và thả là thuộc tính

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

3. Phần còn lại của mã chỉ kiểm soát bố cục và kiểu dáng của các phần tử hộp và hộp

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

Tại thời điểm này, bạn sẽ thấy rằng bạn có thể kéo các mục, tuy nhiên sẽ không có gì khác xảy ra. Để thêm chức năng kéo và thả, chúng ta cần sử dụng API JavaScript

Lắng nghe các sự kiện kéo #

Có một số sự kiện khác nhau để đính kèm để theo dõi toàn bộ quá trình kéo và thả

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

4

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

5

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

6

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

7

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

9

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

20

Để xử lý quy trình kéo và thả, bạn cần một số loại yếu tố nguồn (nơi bắt đầu kéo), trọng tải dữ liệu (thứ bạn đang cố gắng thả) và mục tiêu (khu vực để bắt đầu thả). Phần tử nguồn có thể là một hình ảnh, danh sách, liên kết, đối tượng tệp, khối HTML, v.v. Mục tiêu là vùng thả (hoặc tập hợp các vùng thả) chấp nhận dữ liệu mà người dùng đang cố gắng thả. Hãy nhớ rằng không phải tất cả các phần tử đều có thể là mục tiêu, ví dụ: một hình ảnh không thể là mục tiêu

Bắt đầu và kết thúc trình tự kéo và thả #

Khi bạn đã xác định thuộc tính

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

21 trên nội dung của mình, hãy đính kèm trình xử lý sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

4 để bắt đầu trình tự kéo và thả cho từng cột

Mã này sẽ đặt độ mờ của cột thành 40% khi người dùng bắt đầu kéo cột, sau đó trả về 100% khi sự kiện kéo kết thúc

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

2

Kết quả có thể được nhìn thấy trong bản demo Glitch bên dưới. Kéo một mục và nó trở nên mờ đục. Vì mục tiêu sự kiện ________ 04 là phần tử nguồn, việc đặt ________ 124 thành 40% sẽ cung cấp cho người dùng phản hồi trực quan rằng phần tử là lựa chọn hiện tại đang được di chuyển. Sau khi bạn thả vật phẩm, mặc dù chức năng thả không được áp dụng, phần tử nguồn sẽ trở về độ mờ 100%

Thêm các dấu hiệu trực quan bổ sung với .container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}.box { border: 3px solid #666; background-color: #ddd; border-radius: .5em; padding: 10px; cursor: move;}6, .container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}.box { border: 3px solid #666; background-color: #ddd; border-radius: .5em; padding: 10px; cursor: move;}8 và .container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}.box { border: 3px solid #666; background-color: #ddd; border-radius: .5em; padding: 10px; cursor: move;}7 #

Để giúp người dùng hiểu cách tương tác với giao diện của bạn, hãy sử dụng trình xử lý sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

6,

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8 và

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

7. Trong ví dụ này, các cột là mục tiêu thả ngoài việc có thể kéo được. Giúp người dùng hiểu điều này bằng cách tạo đường viền nét đứt khi họ giữ một mục được kéo qua cột. Ví dụ: trong CSS của bạn, bạn có thể tạo một lớp

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

41 để biểu diễn các phần tử là mục tiêu thả

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

4

Sau đó, trong JavaScript của bạn, hãy thiết lập trình xử lý sự kiện, thêm lớp

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

41 khi cột được kéo qua và xóa lớp đó khi chúng tôi rời đi. Trong trình xử lý

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

20, chúng tôi cũng đảm bảo xóa các lớp ở cuối quá trình kéo

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8

Có một vài điểm đáng giá trong mã này

Hành động mặc định cho sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8 là đặt thuộc tính

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

45 thành

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

46. Tài sản

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

47 được đề cập sau trong bài viết này. Hiện tại, chỉ cần biết rằng nó ngăn chặn sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

9 bị kích hoạt. Để ghi đè hành vi này, hãy gọi

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

49. Một cách thực hành tốt khác là trả lại

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

80 trong cùng trình xử lý đó

Trình xử lý sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

6 được sử dụng để chuyển lớp

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

41 thay vì lớp

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8. Nếu bạn sử dụng

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8, lớp CSS sẽ được chuyển đổi nhiều lần khi sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8 tiếp tục kích hoạt khi di chuột qua cột. Cuối cùng, điều đó sẽ khiến trình kết xuất của trình duyệt thực hiện một lượng lớn công việc không cần thiết. Giữ vẽ lại ở mức tối thiểu luôn là một ý tưởng tốt. Nếu bạn cần sử dụng sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8 cho mục đích nào đó, hãy cân nhắc điều chỉnh hoặc gỡ lỗi trình nghe sự kiện của bạn

Hoàn thành việc thả #

Để xử lý sự sụt giảm thực tế, hãy thêm một trình lắng nghe sự kiện cho sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

9. Trong trình xử lý

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

9, bạn sẽ cần ngăn chặn hành vi mặc định của trình duyệt đối với các lần bị rớt, thường là một số loại chuyển hướng gây phiền nhiễu. Bạn có thể ngăn sự kiện làm nổi bong bóng DOM bằng cách gọi

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

89

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

5

Đảm bảo đăng ký trình xử lý mới trong số các trình xử lý khác

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

6

Nếu bạn chạy mã tại thời điểm này, mặt hàng sẽ không rơi xuống vị trí mới. Để đạt được điều này, bạn cần sử dụng đối tượng

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

50

Thuộc tính

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

51 là nơi diễn ra tất cả thao tác kéo và thả. Nó giữ đoạn dữ liệu được gửi trong một hành động kéo.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

51 được đặt trong sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

4 và được đọc/xử lý trong sự kiện drop. Gọi

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

54 cho phép bạn đặt loại MIME và tải trọng dữ liệu của đối tượng

Trong ví dụ này, chúng tôi sẽ cho phép người dùng sắp xếp lại thứ tự của các cột. Để làm điều đó, trước tiên bạn cần lưu trữ HTML của phần tử nguồn khi quá trình kéo bắt đầu

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

2

Trong sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

9, bạn xử lý thao tác thả cột, đặt HTML của cột nguồn thành HTML của cột đích mà bạn đã thả vào, trước tiên hãy kiểm tra xem người dùng có quay lại cột mà họ đã kéo từ đó không

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

4

Bạn có thể xem kết quả trong bản demo sau. Để điều này hoạt động, bạn sẽ cần một trình duyệt trên máy tính để bàn. API Kéo và Thả không được hỗ trợ trên thiết bị di động. Kéo và thả cột A trên đầu cột B và để ý cách chúng thay đổi vị trí

Thêm thuộc tính kéo #

Đối tượng

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

51 hiển thị các thuộc tính để cung cấp phản hồi trực quan cho người dùng trong quá trình kéo. Các thuộc tính này cũng có thể được sử dụng để kiểm soát cách mỗi mục tiêu thả phản ứng với một loại dữ liệu cụ thể

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

57 hạn chế 'kiểu kéo' mà người dùng có thể thực hiện trên phần tử. Nó được sử dụng trong mô hình xử lý kéo và thả để khởi tạo

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

47 trong các sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

6 và

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8. Thuộc tính có thể được đặt thành các giá trị sau. _______461, _______462, _______463, _______464, _______465, _______466, _______467, _______468 và _______469

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

45 kiểm soát phản hồi mà người dùng nhận được trong các sự kiện

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

6 và

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

8. Khi người dùng di chuột qua một phần tử đích, con trỏ của trình duyệt cho biết loại hoạt động nào sẽ diễn ra (e. g. một bản sao, một di chuyển, vv. ). Hiệu ứng có thể nhận một trong các giá trị sau. ________ 461, ________ 462, ________ 465, ________ 467

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

27 có nghĩa là thay vì sử dụng phản hồi 'hình ảnh ma' mặc định của trình duyệt, bạn có thể tùy chọn đặt biểu tượng kéo

Tải tệp lên bằng cách kéo và thả #

Ví dụ đơn giản này sử dụng một cột làm nguồn kéo và đích kéo. Điều này có thể được nhìn thấy trong giao diện người dùng nơi người dùng được yêu cầu sắp xếp lại các mục. Trong một số trường hợp, mục tiêu kéo và nguồn có thể khác nhau, chẳng hạn như giao diện nơi người dùng cần chọn một hình ảnh làm hình ảnh chính cho sản phẩm bằng cách kéo hình ảnh đã chọn vào mục tiêu

Kéo và thả thường được sử dụng để cho phép người dùng kéo các mục từ máy tính để bàn của họ vào một ứng dụng. Sự khác biệt chính là trong trình xử lý

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

9 của bạn. Thay vì sử dụng

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

29 để truy cập các tệp, dữ liệu của chúng sẽ được chứa trong thuộc tính

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

40

Có thể kéo và thả bằng cách sử dụng html5 không và bằng cách nào?

Trong HTML, bất kỳ phần tử nào cũng có thể được kéo và thả

programming html

Trò chơi câu đố kéo và thả HTML5

Tạo nội dung có thể kéo được #

Lắng nghe các sự kiện kéo #

Bắt đầu và kết thúc trình tự kéo và thả #

Hoàn thành việc thả #

Thêm thuộc tính kéo #

Tải tệp lên bằng cách kéo và thả #

Có thể kéo và thả bằng cách sử dụng html5 không và bằng cách nào?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội