Miễn phí sở hữu 20 giao diện website jQuery kéo thả

Thứ hai - 04/06/2018 22:15

​jQuery giúp mang lại cho chúng ta những thiết kế web tốt nhất chỉ với một vài dòng code và jQuery ngày càng tiến bộ hơn. Với jQuery, bạn sẽ tạo ra được nhưng giao diện web thân thiện người dùng, gọn nhẹ và tinh tế hơn.

Tính năng kéo thả jQuery luôn thu hút sự chú ý của người dùng web và mang lại plugin vô cùng hữu ích. Bài đăng lần này sẽ mang tới cho các bạn những jQuery Plugin tốt nhất, những cái sẽ giúp bạn thêm vào khả năng kép thả cho thiet ke website của mình.  Những plugin này khiến cho công việc của bạn trở nên đơn giản hơn rất nhiều chỉ với việc kéo và thả các chi tiết vào vị trí của nó.

Miễn phí sử dụng 20 giao diện web jQuery kéo/thả

1. jQuery Customizable layout using drag and drop

Sử dụng jQuery cùng với jQuery UI Sortable plugin cho chức năng kéo thả và jQuery Cookie plugin để cố định vị trí của các item.  

2. Collapsible drag and drop

Bảng điều khiển Drag n Drop rất tuyệt vời để bạn kiểm soát cách bạn nhìn thấy thông tin trong khi vẫn có thể sắp xếp các cụm thông tin khác nhau theo ý thích. Đây là loại chức năng thường được cung cấp bởi các cổng web hoặc dịch vụ trang web cá nhân như iGoogle.

3. Jquery iviewer

JQuery.iviewer là một  jquery plugin được sử dụng cho việc load và xem ảnh ở nơi chứa ảnh với khả năng zoom ảnh và kép chúng bằng chuột máy tính. 

4. (mb)ImgNavigator

Một gallery ảnh để xem những bức ảnh cỡ lớn trên thiết kế web. Nó sử dụng bản đồ dẫn đường và động tác kéo. Bạn có thể kéo bức ảnh cỡ lớn của mình theo bản đồ dẫn đường hoặc kéo tùy ý theo bức ảnh. 

5. Drag and Drop Captcha

Ajax Fancy Captcha là một  jQuery plugin giúp bạn bảo vẹ trang web khỏi các hình thức spam. Chúng tôi giới thiệu với các bạn một cách thức trực quan mới để hoàn thành việc "xác nhận con người" (verify humanity). Để thực hiện việc nhận dạng này, bạn chỉ cần làm động tác kéo thả item cụ thể vào một vòng tròn.

6. $.event.special.drag

Plugin này đơn giản hóa việc xử lý hành động kéo bằng cách chú trọng đến hành vi DOM. 

7. jQuery UI multiple draggable plugin

jQuery plugin với khả năng kéo đa dạng này là một bản mở rộng của jQuery UI Draggable plugin. Plugin này mở rộng tính năng hiện tại, cho phép các chi tiết được nhóm lại với nhau và kéo cùng một nhóm đi. 

8. Everything Drag in HTML page small code

Một câu hỏi thường xuyên tôi nhận được từ mọi người là làm thế nào để thực hiện một tập lệnh đơn giản để kéo các yếu tố trong một trang web. Câu trả lời bạn sẽ tìm thấy tại đây. 

9. Drag scrollable

Cuộn một lớp lớn lồng vào nhau bằng cách sử dụng cuộn từ nơi chứa. Nó không yêu cầu chức năng kéo thả từ UI và nó còn nhanh hơn cả kéo UI. Công cụ này được sử dụng để tạo những hiệu ứng tương tự như trong Google maps , nơi bạn có thể kéo nội dung trong một khung hình. 

10. How to Mimic the iGoogle Interface

Trong tutorial này, bạn sẽ được chỉ cách tạo giao diện có thể tùy chỉnh với widget . Sản phẩm cuối cùng sẽ  có kiểu dáng đẹp và mã hóa kín như giao diện của  iGoogle, chứa nhiều ứng dụng tiềm năng. 

11. Drag & Drop with jQuery and PHP

Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

12. Drag & Drop with PHP & jQuery

Trong tutorial này, chúng ta sẽ nhìn thấy 2 trang PHP chính,trang index.php bao gồm phần nội dung và chức năng để thực hiện việc kéo thả và update List.php file cho phép một phần code nhỏ được cập nhật danh sách. Trật tự các cột trong cơ sở dữ liệu sử dụng PHP và MySQL. 

13. jQuery File Tree Aza’s revised version

Phiên bản làm mới lại của phiên bản công cụ cũ với chức năng kéo thả, lùi và một số thứ khác. 

14. NestedSortable

NestedSortable là một bản mở rộng của Sortable từ Interface plugin. Nó cho phép bạn sắp xếp cả theo chiều dọc và theo dạng nest cùng một lúc, sử dụng động tác kéo thả. Bạn có thể thiết lập chính xác y như Sortable thông thường và cho phép bạn sử dụng các chức năng tốt nhất được kế thừa từ nó. 

15. jQuery.event.drag

Ví dụ mà bạn đang xem có mục đích chỉ cho bạn thấy phản ứng tương tác của việc kéo thả. Các demo được giới thiệu để bạn thấy được cốt lõi của mỗi tính năng tại công cụ này. 

16. TextArea Resizer

Dự án cho phép người dùng mở rộng khu vực có thành phần chữ trên website của mình bất kỳ khi nào muốn.  

17. jQuery Iconize Plugin

jQuery plugin có chức năng biến mọi thứ thành dạng icon. Mục tiêu của nó là tạo ra các mục icon ổn định, gọn nhẹ, giảm thiểu các chi tiết cho mọi thành phần HTML element.

18. jQuery List DragSort

Thêm một jQuery plugin nhẹ , giúp mang tới khả năng sắp xếp danh sách bằng động tác kéo thả.  

19. Text With Drag N Drop

Đây là một ví dụ thực tế khác về cách dùng jQuery để tăng hiệu quả thiết kế web của bạn. Bạn sẽ hoàn toàn có thể chèn một văn bản vào email hoặc tương tự thế bằng động tác kéo thả và khu vực dành cho chữ với công cụ này. 

 

Tác giả bài viết: Phùng Thanh Hằng