JQuery sắp xếp được (mục có chiều cao khác nhau) di chuyển đến vị trí đầu tiên hoặc cuối cùng là rắc rối

Question

Vấn đề

Tôi gặp vấn đề với danh sách sắp xếp được tôi với một số mặt hàng có chiều cao khác nhau. Vấn đề xảy ra khi tôi đang cố gắng di chuyển một mục lớn hơn đến vị trí đầu tiên hoặc cuối cùng (cả hai đều có các đối tượng nhỏ hơn). Nếu tôi thành công hiện tại phụ thuộc rất nhiều vào nơi trên mục lớn hơn tôi nhấp và bắt đầu kéo.

Nếu tôi muốn di chuyển mục đến vị trí dưới nhỏ hơn, tôi phải nhấp vào gần cuối mục để nó hoạt động và nếu tôi muốn kéo mục đó đến vị trí trên cùng, tôi phải nhấp vào gần đầu. Nhưng tôi muốn có thể kéo mục bằng cách nhấp vào bất kỳ đâu.

Một số thông tin bổ sung

Các mặt hàng không thể kéo bên ngoài phụ huynh và phụ huynh chỉ là lớn như nó phải được và một cuộn xuất hiện nếu nó lớn hơn nó chứa. Vì vậy, có vẻ như tôi không thể kéo mục lớn hơn qua mục đầu tiên (nhỏ hơn) nếu tôi không kéo nó vào phần trên cùng của mục.

Tôi đã cố gắng khắc phục điều này bằng cách sử dụng cursorAt và sử dụng top: 0 và một thử nghiệm khác sử dụng phần dưới: 0 Nhưng dường như không có sự khác biệt nào (vì vậy tôi có thể đã hiểu nhầm cách sử dụng nó). Tôi hiện đang sử dụng dung sai: con trỏ.

Tôi có thể bỏ qua vấn đề không thể kéo mục lớn hơn đến vị trí cuối cùng tạm thời trong khi sắp xếp tăng chiều cao với chiều cao của mục được kéo. Nhưng nó không phải luôn luôn làm việc và nó không phải là một giải pháp rất tốt. Và vấn đề không thể kéo nó lên đầu vẫn xuất hiện?

tôi không thể thay đổi mã JQuery như trong jquery-sortable-with-containment-parent-and-different-item-heights

Câu hỏi: Làm thế nào tôi có thể kéo một mục lớn đến vị trí đầu hoặc cuối trong khi cho phép người dùng nhấp vào bất cứ nơi nào trên mục?

Cảm ơn sự giúp đỡ của bạn!

Answer 1

Điều này có thể không giải quyết được vấn đề của bạn, nhưng tôi nghĩ tôi sẽ chia sẻ kết quả của một số thử nghiệm tôi đã làm hôm nay. Tôi cần thiết để tạo một bộ sưu tập ảnh có thể sắp xếp với các hình ảnh khối nội tuyến có độ rộng khác nhau và thấy rằng việc di chuyển ảnh rộng hơn sẽ thực sự khó khăn vì trình giữ chỗ nhỏ hơn mục tôi đang di chuyển. Tôi đã kết thúc bằng cách sử dụng này:

container.sortable({ 
     placeholder: "photo placeholder", 
     start: function (event, ui) { 
      ui.placeholder.width(ui.item.width()); 
     } 
    }); 

Tục lớp giữ chỗ đang có để đảm bảo giữ chỗ không được ẩn theo mặc định, và sự kiện start đảm bảo rằng các placeholder là chiều rộng giống như các mục bạn sắp di chuyển. Điều này làm việc rất tốt cho tôi, và trong trường hợp của bạn, thay thế chiều cao cho chiều rộng có thể làm việc.

Tôi cũng đã thử sử dụng containment như bạn đã làm và thấy rằng đôi khi điều đó làm cho mọi thứ trở nên khó khăn hơn tùy thuộc vào các mục trong hàng. Như bạn đã giải thích, bao gồm tolerance: "pointer" giúp giảm bớt các vấn đề, nhưng nếu có thể, việc xóa containment thường làm cho giao diện người dùng được tha thứ hơn.