2

[jQuery Tuts] Tạo chức năng kéo thả trong jQuery không dùng plugins

Chức năng kéo thả – Drag & drop đối tượng trên trang web là một hiệu ứng rất phổ biến, nhất là trong các chức năng cần sắp xếp các đối tượng, định vị vị trí tương đối giữa các đối tượng. jQuery đã hỗ trợ chức năng kéo thả trong plugin jQuery UI, nhưng đôi khi bạn sẽ không muốn cài thêm plugin jQuery UI do kích thước nặng nề của nó cũng như quá thừa thãi các hiệu ứng, sao bạn không tự tạo cho mình chức năng này?

Demo

Ý tưởng

Ta sẽ “bắt” sự kiện mouseMove  trên document. Mỗi khi người dùng rê chuột, hàm handle sự kiện mouseMove  sẽ chạy và cập nhật lại vị trí của element dựa trên tọa độ chuột trên document.

Ta cũng sẽ cần 1 biến tạm $dragging để lưu element đang được kéo. Ta có thể bắt sự kiện mouseDown - nhn chut  để lưu element tác động vào $dragging. Bắt sự kiện mouseUp - Th chut  để xóa đối tượng khỏi biến tạm $dragging, sau khi xóa đối tượng sẽ không được cập nhật vị trí khi di chuyển chuột nữa.

Thực hiện cụ thể

html

CSS

Trong đoạn HTML và CSS trên, tôi bổ sung class .unselectable  để chống trình duyệt hiểu nhầm là ta đang bôi đen text để copy (nhấn giữ chuột và di chuyển).

Javascript / jQuery

Các bạn có thể thấy trong đoạn Js trên có 3 hàm handle sự kiện mousemove, mouseup, mousedown  như tôi đã nói ở phần ý tưởng.

Trong hàm handle mousemove, sử dụng e.pageX  và e.pageY để lấy tọa độ chuột. Tôi cũng trừ 50px để canh giữa vị trí chuột kéo vào tâm đối tượng, do thẻ div của tôi rộng 100px.

Trong hàm handle mousedown, sử dụng e.target  để lấy đối tượng đang tương tác với chuột. Đây là một api rất hữu ích trong các hàm callback cho event của jQuery. Khi gọi callback event, jQuery luôn gởi biến event vào hàm callback, bạn có thể thử console.log(e) để xem event object này chứa gì có thể xài không nhé!

Bình luận với Facebook

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

2 Comments

  1. Cái này mình kéo thả thẻ div trong body… còn em muốn kéo thả thẻ div trong 1 thẻ div khác thì làm sao vậy ạ !

    • Đổi $(document.body) thành $('Selector_Thẻ_Div') mà em dùng làm parent

Leave a Reply

Your email address will not be published. Required fields are marked *