masalah tinggi placeholder sortable jquery


93

Untuk beberapa alasan, tempat penampung untuk item saya yang dapat diurutkan adalah sekitar 10px. Semua item saya yang dapat diurutkan memiliki ketinggian yang berbeda. Bagaimana cara mengubah ketinggian setiap placeholder agar sesuai dengan item yang dipindahkan?


Bisakah Anda mempostingnya ke jsFiddle?
Satish

Apakah ini terjadi saat Anda hanya menyeret dan melepaskan item ke tempat lain? atau item sudah memiliki tinggi ini setelah memuat halaman? tetap lihat di sini: bugs.jqueryui.com/ticket/4482 dan coba solusi seperti yang disebutkan
Mohammad

Jawaban:


251

Saya biasanya menyelesaikan ini dengan mengikat callback yang mengatur ketinggian placeholder ke ketinggian item yang diurutkan ke startacara tersebut. Ini adalah solusi sederhana yang memberi Anda kendali penuh atas bagaimana Anda ingin placeholder Anda ditampilkan.

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

Lihat kasus uji yang diperbarui


21
Saya pribadi harus mengganti ui.item.height () dengan ui.helper.outerHeight () karena beberapa masalah dengan margin dan bantalan yang miring ke ketinggian elemen yang sebenarnya
oshikryu

maaf tapi saya rasa itu tidak berfungsi dengan baik, di tautan ini jsfiddle.net/t8gcZ/1 , tinggi placeholder sama dengan tinggi item (237px) tetapi pada saat mulai, kami dapat melihat item di bawah dipindahkan ke atas sampah
Makio

@Makio Itu karena padding-bottom. Menambahkan padding-bottom ke placeholder memecahkan masalah ini. jsfiddle.net/t8gcZ/136
mekwall

15

Sudahkah Anda mencoba mengatur forcePlaceholderSize:trueproperti? Baca di halaman dokumentasi jQuery UI Sortable .


2
saya telah mencobanya, tetapi menambahkan benar atau salah tidak ada bedanya dengan situs asli saya yang membuatnya tetap tinggi 10px. di jsfiddle ini, ukurannya diubah dengan benar, tetapi forceplaceholderize disetel ke benar atau salah tidak ada bedanya. jsfiddle.net/t8gcZ
oshirowanen

@oshirowanen: Di browser apa Anda mengujinya?
DarthJDG

@oshirowanen: Dapatkah Anda memposting tautan ke kode yang sebenarnya rusak?
DarthJDG

2
Itu berhasil untuk saya. Yang harus saya lakukan adalah mengubah CSS .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }menjadi .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(jadi hapus tinggi) Jadi @DarthJDG Anda benar!
JP Hellemons

@JPHellemons yang hanya berfungsi jika ketinggian tidak dinamis
Erdal G.

2

Apakah elemen Anda display: block? Elemen sebaris mungkin membuat placeholder tidak menjaga ketinggian dengan benar. Misalnya. jsFiddle ini tampaknya memiliki masalah yang mirip dengan yang Anda jelaskan. Menambahkan display: blockke .portletkelas akan memperbaikinya.


Hal yang sama berlaku untuk elemen mengambang. Jika elemen daftar mengambang, tempat penampung juga harus mengambang.
Adrian Marinica

2

Daripada menggunakan "ui.item.height ()", Anda dapat menggunakan "ui.helper [0] .scrollHeight" untuk menstabilkan hasil saat menyeret item dari penampung eksternal juga.

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

1

Anda dapat mengatur gaya untuk tempat penampung Anda sebagai opsi untuk penyortiran Anda.

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

Dan berikan gaya itu ketinggian. Semoga berhasil.


2
Tapi bukankah itu akan memperbaiki ketinggian? Saya membutuhkan tinggi untuk menjadi sama dengan konten.
oshirowanen

1

Dalam kasus saya, saya menemukan solusi yang mirip dengan JP Hellemons , di mana saya memaksakan ketinggian placeholder (dengan ! Penting ) untuk kustom dan juga mengatur visibilitas dengan latar belakang untuk melihat perubahan untuk diri saya sendiri (juga Anda dapat menata dengan cara ini placeholder Anda bagaimanapun Anda inginkan ).

Ini juga bekerja dengan 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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.