Trong hướng dẫn này, chúng tôi sẽ xây dựng một ví dụ kéo và thả bằng cách sử dụng API Kéo và thả HTML với JavaScript vani để sử dụng các trình xử lý sự kiện.

Bạn đang xem : kéo và thả js

Giới thiệu

Kéo và thả là một tương tác người dùng phổ biến mà bạn có thể tìm thấy trong nhiều giao diện người dùng đồ họa.

Có sẵn các thư viện JavaScript để thêm tính năng kéo và thả vào ứng dụng của bạn. Tuy nhiên, có thể có những tình huống mà thư viện không có sẵn hoặc giới thiệu chi phí hoặc phụ thuộc mà dự án của bạn không cần. Trong những tình huống này, kiến ​​thức về các API có sẵn cho bạn trong các trình duyệt web hiện đại có thể đưa ra các giải pháp thay thế.

API Kéo và thả HTML dựa vào mô hình sự kiện của DOM để nhận thông tin về những gì đang được kéo hoặc thả và để cập nhật phần tử đó khi kéo hoặc thả. Với trình xử lý sự kiện JavaScript, bạn có thể biến bất kỳ phần tử nào thành một mục có thể kéo hoặc một mục có thể được thả vào.

Trong hướng dẫn này, chúng tôi sẽ xây dựng một ví dụ kéo và thả bằng cách sử dụng API Kéo và thả HTML với JavaScript vani để sử dụng các trình xử lý sự kiện.

Điều kiện tiên quyết

Để hoàn thành hướng dẫn này, bạn sẽ cần:

  • Một trình duyệt web hiện đại hỗ trợ API Kéo và Thả (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Bước 1 – Tạo Dự án và Đánh dấu Ban đầu

Dự án của chúng tôi sẽ bao gồm một vùng chứa với hai loại phần tử con:

  • Các phần tử con mà bạn có thể kéo
  • Các phần tử con có thể có các phần tử rơi vào chúng

Đầu tiên, hãy mở cửa sổ đầu cuối của bạn và tạo một thư mục dự án mới:

  
  1. mkdir

    kéo-và-thả-ví dụ

Tiếp theo, điều hướng đến thư mục đó:

  
  1. cd

    kéo-và-thả-ví dụ

Sau đó, tạo tệp index.html trong thư mục đó:

  
  1. nano

    index.html

Tiếp theo, thêm mã soạn sẵn cho trang web HTML:

index.html

  

& lt ;!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt; < / p>

& lt;

đầu

& gt; < / p>

& lt;

title

& gt; < / p>

Ví dụ về tính năng kéo và thả của tôi

& lt; /

title < / p>

& gt;

& lt;

liên kết

rel

=

"

biểu định kiểu

"

href

=

"

style.css

"

/ & gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

& lt; /

body

& gt;

& lt; /

html

& gt;

Và giữa các thẻ & lt; body & gt; , hãy thêm mục có thể kéo dropzone (drop target) của bạn:

index.html

  

& lt;

div

class

=

"

example-parent

"

& gt;

& lt;

div

class

=

"

example-origin < p class = "dấu chấm câu"> "

& gt;

& lt;

div

id

=

"

draggable-1

"

class

=

"

example-draggable

"

& gt;

có thể kéo được

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

"

example-dropzone

"

& gt;

vùng Loại

& lt; /

div

& gt;

& lt; /

div

& gt;

Lưu và đóng tệp. Sau đó, tạo tệp style.css :

  
  1. nano

    style.css

Tiếp theo, thêm kiểu cho các phần tử trong tệp index.html của chúng tôi:

style.css

  

. example-parent

{

border

:

2px solid # DFA612

;

color

:

black

;

display

:

flex

;

font-family

:

sans-serif

;

font-weight

:

bold

;

}

. example-origin

{

flex-base

:

100%

;

flex-grow

:

1

;

padding

:

10px

;

}

. example-Draggable

{

background-color

:

# 4AAE9B

;

font-weight

:

bình thường

;

margin-bottom

:

10px

;

margin-top

:

10px

;

padding

:

10px

;

}

. example-dropzone

{

background-color

:

# 6DB65B

;

flex-base

:

100%

;

flex-grow

:

1

;

padding

:

10px

;

}

Điều này sẽ thêm một số định dạng cho ứng dụng. Giờ đây, bạn có thể xem index.html trong trình duyệt và quan sát rằng điều này tạo ra có thể kéo & lt; div & gt; dropzone & lt; div & gt; .

Ảnh chụp màn hình divs có thể kéo và dropzone

Tiếp theo, chúng tôi sẽ làm cho & lt; div & gt; đầu tiên có thể kéo được một cách rõ ràng bằng cách thêm thuộc tính draggable :

index.html

  

& lt;

div

class

=

"

example-parent

"

& gt;

& lt;

div

class

=

"

example-origin < p class = "dấu chấm câu"> "

& gt;

& lt;

div

id

=

"

draggable-1

"

class

=

"

example-draggable

"

kéo được

=

"

true

"

& gt;

có thể kéo được

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

"

example-dropzone

"

& gt;

vùng Loại

& lt; /

div

& gt;

& lt; /

div

& gt;

Lưu và đóng tệp.

Cuối cùng, hãy xem lại index.html trong trình duyệt. Nếu bạn nhấp vào có thể kéo & lt; div & gt; và kéo nó qua màn hình, sẽ có một dấu hiệu trực quan cho thấy nó đang di chuyển

Giá trị mặc định cho thuộc tính dragable auto . Điều đó có nghĩa là phần tử có thể kéo hay không sẽ được xác định bởi hành vi mặc định của trình duyệt của bạn. Thông thường, điều này có nghĩa là các lựa chọn văn bản, hình ảnh và liên kết có thể kéo mà không cần chỉ định draggable = "true"

Bây giờ, bạn có một tệp HTML với phần tử có thể kéo. Chúng tôi sẽ chuyển sang thêm trình xử lý oneevent

Bước 2 - Sự kiện kéo và thả hành động với JavaScript

Hiện tại, nếu chúng tôi thả chuột trong khi kéo phần tử có thể kéo, thì không có gì xảy ra. Để kích hoạt hành động kéo hoặc thả trên các phần tử DOM, chúng tôi sẽ cần sử dụng API Kéo và thả:

  • dragstart : Trình xử lý sự kiện này sẽ được gắn vào phần tử dragstart của chúng tôi và kích hoạt khi sự kiện dragstart xảy ra.
  • dropzone : Trình xử lý sự kiện này sẽ được gắn vào phần tử dropzone của chúng tôi và kích hoạt khi sự kiện dropzone xảy ra.
  • ondrop : Trình xử lý sự kiện này cũng sẽ được đính kèm vào phần tử dropzone của chúng tôi và kích hoạt khi sự kiện drop xảy ra.

Lưu ý: Tổng cộng có tám trình xử lý sự kiện: ondragexit , ondragleave , ondragover , ondragstart ondrop . Ví dụ của chúng tôi, chúng tôi sẽ không yêu cầu tất cả.

Đầu tiên, hãy tham khảo tệp script.js mới trong index.html :

index.html

  

& lt;

body >

& gt;

...

& lt;

script

src

=

"

script.js

"

& gt;

& lt; /

script

& gt;

& lt; /

body

& gt;

Tiếp theo, tạo tệp script.js mới:

  
  1. nano

    script.js

Đối tượng DataTransfer sẽ theo dõi thông tin liên quan đến quá trình kéo hiện tại đang diễn ra. Để cập nhật phần tử của chúng tôi khi kéo và thả, chúng tôi cần truy cập trực tiếp vào đối tượng DataTransfer . Để thực hiện việc này, chúng tôi có thể chọn thuộc tính dataTransfer từ DragEvent của phần tử DOM.

Lưu ý: Đối tượng DataTransfer có thể theo dõi thông tin về mặt kỹ thuật cho nhiều phần tử được kéo cùng một lúc. Đối với ví dụ của chúng tôi, chúng tôi sẽ tập trung vào việc kéo một phần tử.

Phương thức dataTransfer của đối tượng setData có thể được sử dụng để đặt thông tin trạng thái kéo cho phần tử hiện đang được kéo của bạn. Nó có hai tham số:

  • một chuỗi khai báo định dạng của tham số thứ hai
  • dữ liệu thực tế đang được chuyển

Mục tiêu của chúng tôi là chuyển phần tử có thể kéo sang phần tử mẹ mới. Chúng tôi cần có thể chọn phần tử có thể kéo của mình với một id duy nhất. Chúng tôi có thể đặt id của phần tử được kéo bằng phương thức setData để nó có thể được sử dụng sau này.

Hãy truy cập lại tệp script.js của chúng tôi và tạo một hàm mới để sử dụng setData :

script.js

  

chức năng

onDragStart

(

sự kiện

)

{

Sự kiện

.

dataTransfer

.

setData

(

'văn bản / đồng bằng'

,

sự kiện

.

target

.

id

)

;

}

Lưu ý: Internet Explorer 9 đến 11 được báo cáo gặp sự cố khi sử dụng 'text / trơn' . Định dạng cần phải 'text' cho trình duyệt đó.

Để cập nhật kiểu CSS của mục được kéo, chúng tôi có thể truy cập lại kiểu của nó bằng sự kiện DOM và bằng cách đặt bất kỳ kiểu nào chúng tôi muốn cho currentTarget .

Hãy thêm vào chức năng của chúng tôi và thay đổi backgroundColor thành màu vàng :

script.js

  

chức năng

onDragStart

(

sự kiện

)

{

Sự kiện

.

dataTransfer

.

setData

(

'văn bản / đồng bằng'

,

sự kiện

.

target

.

id

)

;

Sự kiện

.

currentTarget

.

style

.

backgroundColor

=

'yellow'

;

}

Lưu ý: Bất kỳ kiểu nào bạn thay đổi sẽ cần được cập nhật lại theo cách thủ công khi thả nếu bạn muốn kiểu chỉ kéo. Nếu bạn thay đổi bất kỳ thứ gì khi nó bắt đầu kéo, phần tử được kéo sẽ giữ nguyên kiểu mới đó trừ khi bạn thay đổi lại.

Bây giờ, chúng tôi có chức năng JavaScript của mình khi bắt đầu kéo.

Chúng tôi có thể thêm ondragstart vào phần tử draggable trong index.html :

index.html

  

& lt;

div

class

=

"

example-parent

"

& gt;

& lt;

div

class

=

"

example-origin

"

< p class = "dấu chấm câu"> & gt;

& lt;

div

id

=

"

draggable-1

"

class

=

"

example-draggable

"

kéo được

=

"

true

"

entry start

=

"

onDragStart (sự kiện);

"

& gt;

có thể kéo được

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

"

example-dropzone < p class = "dấu chấm câu"> "

& gt;

vùng Loại

& lt; /

div

& gt;

& lt; /

div

& gt;

Xem index.html trong trình duyệt của bạn. Nếu bạn cố gắng kéo mục của mình ngay bây giờ, kiểu dáng được khai báo trong hàm của chúng tôi sẽ được áp dụng:

Ảnh gif mô tả một phần tử được kéo nhưng không bị rơi

Tuy nhiên, sẽ không có gì xảy ra khi bạn nhả lần nhấp của mình.

Trình xử lý sự kiện tiếp theo được kích hoạt trong trình tự này là ondragover .

Hành vi thả mặc định cho các phần tử DOM nhất định như & lt; div & gt; s trong các trình duyệt thường không chấp nhận thả. Hành vi này sẽ chặn hành vi mà chúng tôi đang cố gắng thực hiện. Để đảm bảo rằng chúng tôi có được hành vi thả như mong muốn, chúng tôi sẽ áp dụng PreventDefault .

Hãy truy cập lại tệp script.js và tạo một hàm mới để sử dụng PreventDefault . Thêm mã sau vào cuối tệp:

script.js

  

chức năng

onDragOver

(

sự kiện

)

{

sự kiện

.

PreventDefault

(

)

;

}

Bây giờ, chúng tôi có thể thêm ondragover vào phần tử dropzone của chúng tôi trong index.html :

index.html

  

& lt;

div

class

=

"

example-parent

"

& gt;

& lt;

div

class

=

"

example-origin < p class = "dấu chấm câu"> "

& gt;

& lt;

div

id

=

"

draggable-1

"

class

=

"

example-draggable

"

kéo được

=

"

true

"

entry start

=

"

onDragStart (sự kiện);

"

& gt;

có thể kéo được

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

"

example-dropzone

"

người đăng ký

=

"

onDragOver (sự kiện);

"

& gt;

vùng Loại

& lt; /

div

& gt;

& lt; /

div

& gt;

Tại thời điểm này, chúng tôi vẫn chưa viết mã để xử lý việc giảm thực tế. Trình xử lý sự kiện cuối cùng được kích hoạt trong chuỗi này là ondrop .

Hãy truy cập lại tệp script.js của chúng tôi và tạo một hàm mới.

Chúng tôi có thể tham chiếu dữ liệu chúng tôi đã lưu trước đó bằng phương thức dataTransfer của đối tượng setData . Chúng tôi sẽ sử dụng phương thức getData của đối tượng dataTransfer . Dữ liệu chúng tôi đặt là id , vì vậy, đó là những gì sẽ được trả lại cho chúng tôi:

script.js

  

chức năng

onDrop

(

sự kiện

)

{

const

id

=

sự kiện

.

dataTransfer

.

getData

(

'text'

)

;

}

Chọn phần tử có thể kéo của chúng tôi với id được truy xuất:

script.js

  

chức năng

onDrop

(

sự kiện

)

{

const

draggableElement

=

document

.

getElementById

(

id

)

; >

}

Chọn phần tử dropzone của chúng tôi:

script.js

  

chức năng

onDrop

(

sự kiện

)

{

const

dropzone

=

event

.

target

;

}

Nối phần tử dragzone của chúng tôi vào dropzone :

script.js

  

chức năng

onDrop

(

sự kiện

)

{

dropzone

.

appendChild

(

dragableElement

)

;

}

Đặt lại đối tượng DataTransfer của chúng tôi:

script.js

  

chức năng

onDrop

(

event

)

{

Sự kiện

.

dataTransfer

.

clearData

(

>)

;

}

Giờ đây, chúng tôi có thể thêm ondrop vào phần tử dropzone của chúng tôi trong index.html :

index.html

  

& lt;

div

class

=

"

example-parent

"

& gt;

& lt;

div

class

=

"

example-origin < p class = "dấu chấm câu"> "

& gt;

& lt;

div

id

=

"

draggable-1

"

class

=

"

example-draggable

"

kéo được

=

"

true

"

entry start

=

"

onDragStart (sự kiện);

"

& gt;

có thể kéo được

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

"

example-dropzone

"

người đăng ký

=

"

onDragOver (sự kiện);

"

drop

=

"

onDrop (sự kiện);

"

& gt;

vùng Loại

& lt; /

div

& gt;

& lt; /

div

& gt;

Sau khi hoàn tất, chúng tôi có một tính năng kéo và thả hoàn chỉnh. Xem index.html trong trình duyệt của bạn và kéo phần tử dragzone vào dropzone

Ảnh gif mô tả một phần tử được kéo và thả vào mục tiêu thả

Ví dụ của chúng tôi xử lý tình huống của một mục có thể kéo và một mục tiêu thả duy nhất. Bạn có thể có nhiều mục có thể kéo, nhiều mục tiêu thả và tùy chỉnh nó với tất cả các trình xử lý sự kiện API Kéo và Thả khác

Bước 3 - Xây dựng Ví dụ Nâng cao với Nhiều Mục có thể Kéo

Đây là một ví dụ khác về cách bạn có thể sử dụng API này: danh sách việc cần làm với các nhiệm vụ có thể kéo mà bạn có thể di chuyển từ cột "To-do" sang "Done" cột .

Ảnh gif mô tả nhiều việc cần làm đang được kéo và thả vào cột Đã xong

Để tạo danh sách việc cần làm của riêng bạn, hãy thêm nhiều mục có thể kéo hơn với id s duy nhất vào index.html :

index.html

  

& lt;

div

lớp

=

"

example-parent < p class = "dấu chấm câu"> "

& gt;

& lt;

h1

& gt; < / p>

Danh sách việc cần làm

& lt; /

h1

& gt;

& lt;

div

class

=

"

example-origin < p class = "dấu chấm câu"> "

& gt;

Làm

& lt;

div

id

=

"

draggable-1

"

class

=

"

example-draggable

"

kéo được

=

"

true

"

ondragstart

=

"

onDragStart (sự kiện);

"

& gt;

Điều 1

& lt; /

div

& gt;

& lt;

div

id

=

"

draggable-2

"

class

=

"

example-draggable

"

kéo được

=

"

true

"

ondragstart

=

"

onDragStart (sự kiện);

"

& gt;

điều 2

& lt; /

div

& gt;

& lt;

div

id

=

"

draggable-3

"

class

=

"

example-draggable

"

kéo được

=

"

true

"

ondragstart

=

"

onDragStart (sự kiện);

"

& gt;

điều 3

& lt; /

div

& gt;

& lt;

div

id

=

"

draggable-4

"

class

=

"

example-draggable

"

kéo được

=

"

true

"

entry start

=

"

onDragStart (sự kiện);

"

& gt;

4 cây

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

"

example-dropzone

"

người đăng ký

=

"

onDragOver (sự kiện);

"

drop

=

"

onDrop (sự kiện);

"

& gt;

Xong

& lt; /

div

& gt;

& lt; /

div

& gt;

Xem index.html trong trình duyệt của bạn và kéo các mục trong cột Việc cần làm sang cột Hoàn tất . Bạn đã tạo một ứng dụng việc cần làm và thử nghiệm chức năng.

Kết luận

Trong bài viết này, bạn đã tạo một ứng dụng việc cần làm để khám phá chức năng kéo và thả khả dụng cho các trình duyệt web hiện đại.

API Kéo và Thả cung cấp nhiều tùy chọn để tùy chỉnh các hành động của bạn ngoài việc kéo và thả. Ví dụ: bạn có thể cập nhật kiểu CSS của các mục được kéo. Ngoài ra, thay vì di chuyển mục, bạn có thể chọn sao chép mục có thể kéo của mình để nó được sao chép khi thả.

Lưu ý rằng mặc dù nhiều trình duyệt web hỗ trợ công nghệ này, nhưng bạn có thể không dựa vào công nghệ này nếu đối tượng của bạn bao gồm thiết bị không hỗ trợ chức năng này

Để biết thêm thông tin về API Kéo và Thả, hãy xem tài liệu của MDN trên đó


Xem thêm những thông tin liên quan đến chủ đề js kéo và thả

Javascript: tải lên nhiều file dùng kéo thả (full code)

alt

  • Tác giả: Huy Dao Quang
  • Ngày đăng: 2015-08-09
  • Đánh giá: 4 ⭐ ( 6175 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: http://hoclaptrinhonline.org

    code: http://hoclaptrinhonline.org/blog/javascript-tai-len-nhieu-file-dung-keo-tha-full-code/

Kéo và thả trong HTML5

  • Tác giả: xuanthulab.net
  • Đánh giá: 4 ⭐ ( 1955 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thực hiện drag và drop các phần tử trong HTML5, các hàm API xử lý drag và drop

jQuery drag and drop (kéo thả bằng jQuery)

  • Tác giả: buihuytran.com
  • Đánh giá: 3 ⭐ ( 4670 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Kéo thả dragable trong js và cách dùng

  • Tác giả: code24h.com
  • Đánh giá: 3 ⭐ ( 5210 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Drag và Drop (DnD) là khái niệm Giao diện người sử dụng (User Interface) mạnh mẽ mà giúp nó dễ dàng để sao chép, đặt lại thứ tự và xóa các item với sự trợ giúp của các cú nhấn chuột. Điều này cho phép để nhấn chuột và giữ nút chuột di chuyển qua một phần tử, kéo nó tới vị trí khác, và buông nút ...

Cách tạo phần tử kéo và thả với Vanilla JavaScript và HTML

  • Tác giả: galaxyz.net
  • Đánh giá: 5 ⭐ ( 1145 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kéo và thả là một tương tác user phổ biến mà bạn có thể tìm thấy trong nhiều giao diện user đồ họa.

Kéo và thả với AngularJS bằng jQuery UI

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 1106 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong vài tuần qua, tôi đã bắt đầu làm việc với AngularJS . AngularJS là một khung đơn giản tuyệt vời cho phép bạn tạo các ứng dụng web hoàn chỉnh trong javascript. Nó cung cấp liên kết dữ…

Ext.js - Kéo và thả Grid to Form

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 6338 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Với sự trợ giúp của plugin kéo và thả, chúng ta có thể kéo dữ liệu từ một lưới và thả nó vào các trường biểu mẫu. Ví dụ sau đây cho thấy rằng chúng ta có thể kéo dữ liệu từ một lưới và thả nó vào một biểu mẫu. Ở đây, chúng tôi có một nút đặt lại...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php