Làm cách nào để tạo các bảng điều khiển kéo và thả?

Question

Tôi muốn có các bảng có thể gắn được bằng cách sử dụng jquery hoạt động giống như trong Visual Studio. Chủ yếu, tôi chỉ muốn có thể kéo và thả các bảng vào bất kỳ phía nào của màn hình. Các tab, cửa sổ nổi và các bảng tự động ẩn là không cần thiết. Khi hai hoặc nhiều bảng được thả vào cùng một bên, chúng sẽ chia sẻ không gian ở phía bên kia của màn hình. Người dùng có thể thay đổi kích thước các bảng.

Có plugin jQuery và/hoặc jQuery UI có thể thực hiện việc này không? Hoặc có thể là một hướng dẫn?

Answer 1

Bạn có thể sử dụng giao diện người dùng Jquery để thực hiện tất cả điều này.

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

Dưới đây là một ví dụ về một kéo và thả trang tôi thực hiện.

Answer 2

Tôi đã sử dụng jQuery UI Giao diện cung cấp tất cả các chức năng ngoại trừ kéo-thả và vì điều này cưỡi trên đầu trang của jQuery chúng ta có thể sử dụng jQuery UI kéo-thả khi cần thiết.

jQuery UI Layout

Gần đây tôi đã phát hiện ra kiểm soát mới này là những gì cần chính xác.

http://www.dockspawn.com/#

Một quản lý bố trí giá trị xem xét

https://github.com/WebCabin/wcDocker

chúng tôi đang sử dụng điều này một trong các dự án của chúng tôi và nó là khá hữu ích.

Gần đây nhất tôi tìm thấy lobiPanel và tôi đã sử dụng điều đó để tạo cổng thông tin tuyệt vời. Tôi yêu nó.

Answer 3

Nếu bạn không bị giới hạn jquery, đây là một người quản lý docking ấn tượng cho phép sử dụng nhiều cửa sổ: http://golden-layout.com/examples/ (Thử "Open in new window" nút)

Trên trang FAQ có một danh sách người quản lý bố cục thay thế: http://golden-layout.com/faq/