Thêm kéo và thả vào trang web dễ dàng với Dragula
Tìm kiếm một thư viện miễn phí để xử lý các tính năng kéo và thả? Sau đó Dragula là tài nguyên duy nhất bạn cần.
Kịch bản miễn phí này cho phép bạn thêm tính năng kéo và thả cho bất kỳ yếu tố nào trên trang của bạn. Điều này bao gồm hỗ trợ cho các khung React & AngularJS, cùng với JavaScript vanilla.
Dragula rất dễ cài đặt và nó đi kèm với một loạt các kích hoạt tùy chỉnh cho hành vi của người dùng. Điều này có nghĩa là bạn có thể kích hoạt các chức năng của riêng mình sau khi người dùng kéo một mục, nhấp vào một mục hoặc sắp xếp lại bất kỳ phần nào của trang.
Nếu bạn xem qua bản demo trực tiếp, bạn sẽ tìm thấy một vài đoạn mã, cùng với mẫu có thể sử dụng.
Thiết lập Dragula chỉ yêu cầu một tệp JavaScript duy nhất để làm cho nó hoạt động. Mặc dù, các tùy chọn bổ sung có thể gây một chút bối rối.
Ví dụ: giả sử bạn có hai container, #trái và #đúng, mà bạn muốn hỗ trợ các mục có thể kéo. Bạn sẽ cần phải tự thêm các thùng chứa này vào chức năng Dragula để hỗ trợ các phương thức kéo và thả.
Nếu bạn không nắm vững các nguyên tắc cơ bản của phát triển front-end thì bạn sẽ phải vật lộn để sử dụng Dragula. Nhưng, repo GitHub có rất nhiều những ví dụ tuyệt vời bạn có thể làm theo cùng với và ngay cả đoạn mã bạn có thể sao chép.
Đây là một mẫu từ các tài liệu GitHub để biết cách nhắm mục tiêu hai container (trái và phải):
dragula ([document.querySelector ('# left'), document.querySelector ('# right')]); Lưu ý nếu bạn nhìn xa hơn trên trang GitHub bạn sẽ tìm thấy một danh sách lớn các lựa chọn bạn có thể chuyển đến chức năng này.
Bạn có thể chọn có nên sao chép hoặc di chuyển vật phẩm, thùng chứa nào hỗ trợ các mục được kéo và ngay cả chức năng gọi lại hoạt động thông qua các hành vi người dùng khác nhau, chẳng hạn như:
- Di chuột qua một container
- Sự kiện nhấp và kéo ban đầu
- Sự kiện thả
- Thả một yếu tố ra khỏi giới hạn
- Nhân bản một phần tử / vùng chứa bằng cách kéo
Thư viện này sẽ có một số công việc ban đầu nhưng nếu bạn quen thuộc với JavaScript thì nó không phải là một bộ não.
Nhìn qua trang demo để xem làm thế nào nó hoạt động và để lấy một vài ý tưởng mẫu mã. Dragula là một thư viện đồ sộ và có lẽ đây là tập lệnh mã nguồn mở tốt nhất xử lý kéo và thả, với phạm vi tùy chỉnh rộng nhất.
