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?

jquery jquery-ui jquery-ui-sortable oshirowanen
sumber
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

mekwall.dll
sumber
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 .

DarthJDG
sumber
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.

Gijs
sumber
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);
    }
});
Elanchezhian Narayanasamy
sumber
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.

MANATTWeb
sumber
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
pengguna3780666
sumber