Hướng dẫn kéo thả trong javascript

Question

Dragdealer - được cung cấp miễn phí sẽ giúp bạn tạo ra các giao diện có hỗ trợ kéo thả giống như các thanh trượt

Dragdealer là một bản javascript được phát triển độc lập không phụ thuộc vào các script nào khác, chạy được trên các dòng điện thoại cảm ứng. Bạn có thể dễ dàng thay đổi hình dạng và góc nhìn của thanh truợt với một chút hiểu biết về CSS

Đọan mã này sử dụng khá linh họat với các chức năng như :

Kéo thả theo chiều ngang hoặc chiều dọc
Xác định vị trí ban đầu cửa thanh trượt (x/y)
Xác định số bước
Tốc độ trượt
Và nhiều hơn thế...

Cách sử dụng :

Trước tiên, bạn cần download Dragdealer. Sau đó thêm vào trong thẻ của trang web:

Mã HTML đơn giản :

drag me

Ngoài ra Dragdeale còn có nhiều lựa chọn cho riêng bạn. Bạn có thể xem thêm các demo ở trang chủ Dragdeale

Tìm hiểu tính năng drag và drop (kéo thả) trong HTML5

Nếu bạn muốn sử dụng tính năng kéo thả thì drag và drop trong HTML5 có thể hỗ trợ bạn.

Tính năng kéo thả có thể áp dụng cho mọi phần tử HTML, mục đích là để dịch chuyển phần tử từ vị trí này sang vị trí khác hay để thu thập dữ liệu.

Phần tử nào muốn có khả năng kéo (drag) đơn giản thêm vào phần tử đó thuộc tính: draggable="true"

Ví dụ:

Mã:


    Logo Google

Thả vào đâu (drop)
Khi dữ liệu được thả vào một phần tử nào đó, thì sự kiện drop sẽ phát sinh. Mặc định thì dữ liệu hay phần tử này không có phép thả lên phần tử khác. Nên muốn cho phép thả vào một phần tử thì cần gọi phương thức event.preventDefault() thiết lập tại thuộc tính ondragover.

Xây dựng hàm có tên allowDrop dùng để thiết lập cho phép phần tử chấp nhận phần tử khác thả vào:

Mã:

function allowDrop(ev) {
    ev.preventDefault();
}

Sau khi có hàm allowDrop như trên thì phần tử nào muốn thiết lập cho phép thả vào thì thêm thuộc tính là ondragover="allowDrop(event)". Ví dụ, box sau cho phép thả vào:

Mã:

Xử lý thả phần tử (drop)
Khi dữ liệu thả vào một phần tử, sự kiện thả sẽ diễn ra và nó sẽ gọi hàm thiết lập trong thuộc tính ondrop. Ví dụ xây dựng hàm để xử lý sự kiện này và lấy dữ liệu thả vào:

Giả sử đặt tên hàm là drop, có thể xây dựng hàm như sau:

Mã:

function drop(ev) {
    
    //Gọi hàm này để ngăn cản browser xử lý mặc định sự kiện drop (ví dụ mở link)
    ev.preventDefault();
    
    //Lấy dữ liệu text thả vào - chính là ID phần tử kéo đã lưu ở trên
    var data = ev.dataTransfer.getData("text");
    
    //Di chuyển phần tử kéo vào phần tử thả
    ev.target.appendChild(document.getElementById(data));
}

Sau khi có hàm drop thiết lập phần tử với thuộc tính ondrop dạng như sau:

Mã:

Kết hợp toàn bộ mã kéo thả
Toàn bộ các đoạn code về kéo thả trên bạn có thể kết

Mã:









    
    Logo Google

Giờ chạy code trên, bạn đã có thể kéo thẻ div có chứa logo google vào box
hợp lại để chúng hoạt động chính xác thành một nội dung như sau:

Chúc các bạn thành công.

Nguồn: Internet

programming javascript

Hướng dẫn kéo thả trong javascript

Cách sử dụng :

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