jQuery và jQuery UI

jQuery là một thư viện đa trình duyệt được xây dựng từ JavaScript, Ajax. Nó giúp đơn giản hóa và dễ dàng hơn để sử dụng các đối tượng JavaScript và phát triển ứng dụng Ajax. Điều này cho phép các nhà phát triển để tạo ra trừu tượng hóa ở mức độ thấp tương tác và hình ảnh động, hiệu ứng tiên tiến và vật dụng cao cấp, chủ đề có thể. Cách tiếp cận mô-đun để thư viện jQuery cho phép tạo ra các công cụ mạnh mẽ và năng động web và các ứng dụng web.

jQuery UI (jquery user interface) là một là một phần mở rộng của jQuery giúp dễ dàng tạo ra các yếu tố giao diện người dùng gọn gàng cho các trang web, cung cấp những ứng dụng, widgets, theme...

Kéo thả với draggable() và droppable()

jQuery hỗ trợ nhà phát triển sử dụng kéo thả bằng các hàm draggable() và droppable(). Thật tuyệt vời nếu bạn có một giao diện nơi mà ở đó người dùng có thể tha hồ kéo thả, di chuyển... với các thành phần của trang web!

Cấu hình

Bạn có thể sử dụng trực tiếp các thuộc tính của thẻ HTML và JavaScript để cấu hình kéo thả: Như trong w3schools các thuộc tính của thẻ như: draggable="true", ondrop, ondragstart, ondragover... Nhưng ở đây mình sẽ cùng nhau sử dụng thư viện jQuery Ui có sẵn để được hỗ trợ và dễ dàng sử dụng hơn: Để sử dụng được jquery-ui chúng ta cần tải về thư viện hoặc đơn giản hơn là vào trang: developers.google.com và copy snippet để vào trong code. Vậy là code của chúng ta đã sẵn sàng để sử dụng kéo thả!

Code

Trước khi code chúng ta sẽ xem một kết quả mà có sử dụng kéo thả mà mình đã làm:

Nhìn thật tuyệt Và bây giờ bắt đầu code!

Đầu tiên là các thuộc tính của hàm để sử dung một cách hiệu quả

Draggable

Droppable

Ví dụ

$( "#list" ).draggable({
    scroll: true,
    axis: "x",
    containment: "body",
    revert: true,
    helper: "clone",
    disable: false,
    start: function( event, ui ) {
            $(ui.item).addClass("active-draggable");
    },
    drag: function( event, ui ) {
    },
    stop:function( event, ui ) {
            $(ui.item).removeClass("active-draggable");
    }
});

$( "#container" ).droppable({
    accept: "#list",
    class: {
          "ui-droppable-active":"ac"
          "ui-droppable-hover":"hv"
    }
    acivate: function( event, ui ) {
            $(this).css('background','red');
    },
    over: function( event, ui ) {
            $(this).css('background','yellow");
    },
    out: function( event, ui ) {
            $(this).css('background','blue');
    },
    drop: function( event, ui ) {
            $(this).css('background','white');
    },
    deactivate: function( event, ui ) {
             $(ui.item).css('background','green');
    },
});

Vậy là các thẻ có id = "list" đã có thể được kéo và thả, thẻ có id = "container" đã nhận sự kiện kéo thả của thẻ trên và ảnh hưởng đến nó.

Tổng kết

Kéo thả là một cách tuyệt vời để lấy thêm sự thích thú của người dùng khi sử dụng trang web nên mong bài viết có thể giúp đỡ những người đang cần đến nó. Bài viết có tham khảo nguồn từ Kênh Thư viện lập trình

Cảm ơn mọi người đã đọc bài viết của mình.