jquery có thể sắp xếp và thay đổi kích thước với các mục danh sách trùng lặp

Question

Tôi có nhiều danh sách có thể sắp xếp cạnh nhau. Bạn có thể thay đổi kích thước chiều rộng của các div để bao gồm các danh sách khác. Điều này cho phép một mục là một phần của nhiều danh sách.

Tôi muốn thực hiện việc này mà không cần bất kỳ div nào có thể sắp xếp chồng lên nhau.

Xem fiddle tại http://jsfiddle.net/2J6af/

EDIT: Nếu bạn đi đến fiddle trên và mở rộng độ rộng của một mục phân loại, sau đó di chuyển nó xung quanh và thả. Bạn sẽ thấy rằng nó trùng lặp các mục có thể sắp xếp khác. Tôi muốn tất cả các vật phẩm có thể sắp xếp được sắp xếp sao cho không có chồng chéo.

EDIT: Tôi đã trải qua Dealing with overlapping jQuery sortable lists một lần nữa theo đề xuất của @KateA, và mặc dù nó tương tự, nó nói về danh sách trùng lặp thay vì các mục có thể sắp xếp bao gồm nhiều danh sách.

EDIT: Trong sản phẩm hoàn chỉnh sẽ có 7 danh sách cạnh nhau và tôi cần phải sắp xếp lại các sắp xếp theo thứ tự cụ thể sau khi người dùng đã bỏ một mục. Tôi biết bạn có thể thêm một chức năng để sắp xếp: sự kiện, có lẽ đây là chức năng chính để sắp xếp lại và kiểm tra/sửa chữa bất kỳ mục có thể sắp xếp chồng chéo nào?

EDIT: Tôi cũng nhận thấy rằng mục có thể sắp xếp hoạt động khác nhau khi kéo tùy thuộc vào nếu bạn đã định lại kích thước bằng cách sử dụng tay cầm bên trái hoặc bên phải. Nó bị nhầm lẫn về danh sách bạn đang lơ lửng. ví dụ. nếu bạn thay đổi kích thước bằng cách sử dụng tay cầm bên trái và bạn nhặt nó lên và thử thả nó vào danh sách ở giữa hoặc bên phải, nó sẽ thả xuống danh sách nào tiếp theo ở bên trái con trỏ thay vì nó hiển thị một trình giữ chỗ trống bên dưới con chuột con trỏ.

EDIT: jquery fullCalendar thực hiện exaclty những gì tôi cần, nhưng làm thế nào họ làm điều đó? http://arshaw.com/fullcalendar/

EDIT: Tôi đã nỗ lực mở rộng phạm vi kiến ​​thức có thể sắp xếp của mình, bạn có nghĩ rằng tôi đang đi đúng hướng không? http://jsfiddle.net/2J6af/17/

Answer 1

Có một số vấn đề với những gì bạn đang cố gắng nhưng tôi đã quản lý để thực hiện example để khắc phục một số lỗi. Vấn đề trên tất cả là hai plugin Jquery UI (có thể sắp xếp, có thể thay đổi kích cỡ) không hỗ trợ tất cả các tính năng mà bạn muốn ít nhất một nếu không phải cả hai sẽ phải được viết lại hoặc thực hiện từ đầu. Một số vấn đề bao gồm:

1. Tay cầm phía tây làm cho chiều rộng tăng và thuộc tính css 'trái' giảm gây ra sự cố với các mục danh sách ở bên trái. Cùng một vấn đề tồn tại với phía đông và ở phía bên phải.
2. Việc đặt các mục danh sách có vị trí 'tương đối' hoặc 'tuyệt đối' sẽ khiến chúng không chiếm không gian trong luồng của trang, do đó chồng chéo lên nhau.
3. Có ba div riêng biệt có nghĩa là mỗi mục chỉ có thể là thành viên của một danh sách và bạn phải kiểm tra chiều rộng để xem liệu nó có còn chiếm các cột khác hay không. Một chút lộn xộn của nó.

Trên đầu trang của ví dụ tôi đã cung cấp, tôi tin rằng bạn cần giữ một mô hình dữ liệu theo cách lập trình sẽ theo dõi từng mục và cột nào tồn tại và cho phép điều chỉnh trong màn hình khi cần.

Tôi đã tập hợp rằng đây là tất cả những gì liên quan đến đại diện cho một tuần và mọi thứ diễn ra trong khung thời gian đó. Trong khi tôi nghĩ rằng tôi đã giải quyết các vấn đề chính của câu hỏi của bạn, tôi thấy vấn đề này giải trí và nếu bạn cung cấp thêm ngữ cảnh, tôi sẵn sàng trợ giúp với sản phẩm cuối cùng.

Answer 2

fullcalendar dường như có lưới hình ảnh ở chế độ nền, với các mục có thể sắp xếp ở trên cùng trong lưới ảo, vì vậy chúng có nhiều khả năng tính toán vị trí của chúng theo cách thủ công.

Cách jQueryUI thực hiện Sắp xếp bằng cách thêm trình giữ chỗ vào danh sách, tự nhiên (luồng trang) hiển thị không gian cho số thả. Tôi sẽ đề nghị không làm như thế này, tôi không nghĩ rằng có một cách bạn có thể làm sạch hack jQueryUI để có hành vi mà bạn đang tìm kiếm.

tôi sẽ đề nghị bạn làm điều tương tự như fullcalendar, sử dụng kéo và resizable plugins, và di chuyển các yếu tố ra khỏi con đường sử dụng vị trí tuyệt đối khi được chồng chéo với các mặt hàng khác.

Không đặt tính năng chụp vào có thể kéo được, nhưng dựa trên vị trí có thể kéo, tính toán va chạm và quyết định cách xử lý chúng, hoặc di chuyển lên hoặc xuống.