vấn đề chiều cao trình giữ chỗ có thể sắp xếp jquery

93

Vì lý do nào đó, trình giữ chỗ cho các mục có thể sắp xếp của tôi là khoảng 10px. Tất cả các mục có thể phân loại của tôi có chiều cao khác nhau. Làm cách nào để thay đổi chiều cao của từng phần giữ chỗ để phù hợp với mục đang được di chuyển?

jquery jquery-ui jquery-ui-sortable

— oshirowanen
nguồn

Bạn có thể đăng nó lên jsFiddle?

— Thỏa mãn

Điều này có xảy ra khi bạn chỉ kéo và thả mục của mình sang một nơi khác không? hoặc các mục đã có chiều cao này sau khi tải trang? Dù sao, hãy xem ở đây: bug.jqueryui.com/ticket/4482 và cố gắng giải quyết vấn đề như đã đề cập

— Mohammad

250

Tôi thường giải quyết điều này bằng cách liên kết một lệnh gọi lại đặt chiều cao của trình giữ chỗ với chiều cao của mục đang được sắp xếp cho startsự kiện. Đó là một giải pháp đơn giản cung cấp cho bạn khả năng kiểm soát chi tiết đối với cách bạn muốn trình giữ chỗ của mình được hiển thị.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

Xem trường hợp thử nghiệm cập nhật

— mekwall
nguồn

21

Cá nhân tôi đã phải thay thế ui.item.height () với ui.helper.outerHeight () do một số vấn đề với margins and padding lệch chiều cao thực tế của phần tử

— oshikryu

xin lỗi nhưng tôi nghĩ nó không hoạt động tốt, trong liên kết này jsfiddle.net/t8gcZ/1 , chiều cao trình giữ chỗ giống với chiều cao mục (237px) nhưng tại thời điểm bắt đầu, chúng tôi có thể thấy mục bên dưới được di chuyển lên một lớp

— Makio

@Makio Đó là do padding-bottom. Thêm padding-bottom vào trình giữ chỗ sẽ giải quyết được điều này. jsfiddle.net/t8gcZ/136

— mekwall

15

Bạn đã thử đặt thuộc forcePlaceholderSize:truetính chưa? Hãy đọc trên trang tài liệu jQuery UI Sortable .

— DarthJDG
nguồn

2

tôi đã thử điều đó, nhưng việc thêm true hoặc false không có gì khác biệt với trang web ban đầu của tôi. Trang này luôn giữ nó ở mức cao 10px. trong jsfiddle này, nó thay đổi kích thước chính xác, nhưng forceplaceholderize được đặt thành true hoặc false không có sự khác biệt. jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen: Bạn đang thử nghiệm nó trên trình duyệt nào?

— DarthJDG

@oshirowanen: Bạn có thể đăng liên kết đến mã mà nó thực sự bị hỏng không?

— DarthJDG

2

Điều đó làm việc cho tôi. Tất cả những gì tôi phải làm là thay đổi CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }thành .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(vì vậy hãy loại bỏ chiều cao) Vì vậy, @DarthJDG bạn đã đúng!

— JP Hellemons

@JPHellemons chỉ hoạt động nếu chiều cao không động

— Erdal G.

2

Các yếu tố của bạn display: block? Các phần tử nội dòng có thể làm cho trình giữ chỗ không giữ đúng chiều cao. Ví dụ. jsFiddle này dường như gặp sự cố tương tự như sự cố bạn đã mô tả. Thêm display: blockvào .portletlớp sẽ sửa nó.

— Gijs
nguồn

Tương tự đối với các phần tử nổi. Nếu các phần tử danh sách được thả nổi, thì trình giữ chỗ cũng phải nổi.

— Adrian Marinica

2

Thay vì sử dụng "ui.item.height ()", bạn có thể sử dụng "ui.helper [0] .scrollHeight" để có kết quả ổn định khi kéo một mục từ vùng chứa bên ngoài.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});

— Elanchezhian Narayanasamy
nguồn

1

Bạn có thể đặt kiểu cho trình giữ chỗ của mình như một tùy chọn để có thể sắp xếp.

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

Và chỉ cần cung cấp cho phong cách đó một chiều cao. Hy vọng rằng hiệu quả.

— MANATTWeb
nguồn

2

Nhưng điều đó sẽ không cố định chiều cao? Tôi cần chiều cao giống với nội dung.

— oshirowanen

1

Trong trường hợp của tôi, tôi đã tìm thấy giải pháp tương tự như JP Hellemons , trong đó tôi buộc chiều cao của trình giữ chỗ (with ! Important ) thành tùy chỉnh và cũng đặt chế độ hiển thị với nền để xem các thay đổi cho bản thân tôi (bạn cũng có thể tạo kiểu này theo cách này bất kỳ cách nào bạn muốn ).

Điều này cũng hoạt động với display: inline-block;

.ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px

— người dùng3780666
nguồn