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

• ME
• DỊCH V

Posted on 28/06/2015 by Hoàng Tựa

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?

Mục lục [Ẩn]

• 1 Demo
• 2 Ý tưởng
• 3 Thực hiện cụ thể
  • 3.1 html
  • 3.2 CSS
  • 3.3 Javascript / jQuery

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 - nhấnchuột  để lưu element tác động vào $dragging. Bắt sự kiện mouseUp - Thả chuột  để 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

1	<div class="unselectable">Drag me!</div>

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

body {background: #3c3c3c;} div {     background: #FFF;     width: 100px;     height: 100px;     text-align: center;     line-height: 100px;     vertical-algin: middle;     border: 1px solid black;     cursor: pointer; } *.unselectable {    -moz-user-select: none;    -khtml-user-select: none;    -webkit-user-select: none;    -ms-user-select: none;    user-select: none; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(document).ready(function() {     var $dragging = null;       $(document.body).on("mousemove", function(e) {         if ($dragging) {             $dragging.offset({                 top: e.pageY-50,                 left: e.pageX-50             });         }     });          $(document.body).on("mousedown", "div", function (e) {         $dragging = $(e.target);     });          $(document.body).on("mouseup", function (e) {         $dragging = null;     }); });

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