Sắp xếp giao diện người dùng JQuery - Thêm trình giữ chỗ vào danh sách để mô phỏng không gian trống

Question

Giao diện người dùng JQuery có thể sắp xếp hoạt động tốt cho danh sách không có khoảng trống, nhưng nói rằng tôi muốn hiển thị danh sách các mục có khoảng trống, ví dụ:

1, 2, trống, 4, 5, 6, trống, 8

nơi số đại diện cho số vùng. Hành vi mong đợi sau đó sẽ là nếu người dùng kéo một phần tử qua 2 vị trí, giá trị 2 được đẩy vào vị trí trống 3 và người dùng có thể thả phần tử mới trong 2 vị trí, trong khi nếu họ kéo một phần tử mới trên trống 3 vị trí, các mục trong danh sách sẽ không bị đẩy xuống và người dùng chỉ có thể thả mục mới vào trong 3 vùng trống. Hy vọng điều này có ý nghĩa.

Tôi đã xem xét mã phân loại UI JQuery và có vẻ như tôi cần sử dụng thay đổi và nhận các cuộc gọi lại để đạt được điều này, nhưng, là mới đối với JQuery/JS nói chung, không rõ ràng tôi phải sử dụng những gì để thêm các phần giữ chỗ trống này và quản lý danh sách lựa chọn để tôi không phá vỡ chức năng sắp xếp với mã tùy chỉnh.

Bất kỳ con trỏ, ví dụ, v.v ... sẽ được đánh giá cao.

Sau khi đập đầu của tôi về vấn đề này trong một thời gian, tôi đã tạo ra một jsFiddle: http://jsfiddle.net/pdHnX/

Để giúp giải thích vấn đề. Tôi tin rằng mọi thứ tôi đang cố gắng hoàn thành đều có thể xảy ra trong một phương pháp _rearrange bị ghi đè. Mã fiddle xử lý trường hợp một mục đang thay thế một mục phụ, nhưng có một vấn đề kỳ lạ, nếu bạn kéo một mục từ danh sách mục vào danh sách phụ, hãy thả mục, sau đó kéo cùng một mục trong danh sách bộ nạp , danh sách phụ được thu nhỏ bởi 1, đó là một vấn đề.

Có nhiều vấn đề hơn khi bạn bắt đầu kéo thêm các mục vào danh sách phụ, nhưng đây là nơi tôi đang gặp vấn đề tại thời điểm này.

Answer 1

Xin lỗi, đây là một câu hỏi thực sự khó giải thích. Các yêu cầu thực sự cụ thể và khó mô tả.

Đây là giải pháp tôi đang tìm kiếm.

Những người khác trả lời ở đây, trong khi họ có thể là giải pháp cho vấn đề được mô tả kém, không phải là những gì tôi đang tìm kiếm.

http://jsfiddle.net/vfezJ/

Thật không may, mã sortable.js là rất nhiều lông nên mã liên kết vẫn còn có rất nhiều lông. Giải pháp mà tôi đã đăng cũng đưa ra một số giả định về các lớp CSS và các id DOM để hoàn thành công việc.

Answer 2

Tôi không chắc chắn nếu tôi hiểu bạn một cách chính xác, nhưng đây là những gì tôi đã đưa ra:

http://jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone', 
    start: function(ev, ui){ ui.helper.width($(this).width()); }     // ensure helper width 
}); 

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight', 
    drop: function(ev, ui){ 
     var item = ui.draggable; 
     if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it 
     this.innerHTML = '';              // clean the placeholder 
     item.css({ top: 0, left: 0 }).appendTo(this);        // append item to placeholder 
    } 
}); 

Giả định:

• Nếu bạn kéo mục từ danh sách hàng đầu - nó sẽ được "nhân bản" (bản gốc sẽ vẫn còn trong danh sách)
• Nếu yo u kéo mục từ danh sách dưới cùng - nó sẽ di chuyển (để trống phần giữ chỗ)
• Nếu bạn thả bất kỳ mục nào vào trình giữ chỗ của danh sách dưới cùng - nó sẽ thay thế trình giữ chỗ
• Nếu bạn thả bất kỳ mục nào vào trình giữ chỗ trống/mục - nó sẽ thay thế nó
• kích thước của cả hai danh sách luôn giữ nguyên

Hãy cho tôi biết nếu điều này giúp hoặc bạn đang tìm kiếm cái gì khác. Cũng giải thích toàn bộ nhiệm vụ (mục đích kéo này là những gì) có thể giúp :-)

Answer 3

http://jsbin.com/igozat/2

Dưới đây là một cái gì đó tôi whipped lên. Nó không hoàn hảo hoặc xứng đáng với nhiều tín dụng bởi vì có thể sắp xếp() không thể bị gián đoạn giữa việc kéo. Nếu điều đó là có thể, thì một hành động thả có thể tiếp quản hoàn toàn.Ngoài ra, nỗ lực của tôi để sắp xếp lại là lỗi. Tôi biết rằng phương thức này chỉ hoạt động với jQuery thông thường, nhưng nó không hoạt động với jQuery UI.

Có nguy cơ nghe như giật, nếu là tôi, tôi sẽ viết chức năng chỉ với jQuery. Giao diện người dùng jQuery không phải tất cả đều bị nứt. : P