jquery sıralanabilir yer tutucu yükseklik sorunu

94

Bazı nedenlerden dolayı, sıralanabilir öğelerimin yer tutucusu yaklaşık 10 pikseldir. Tüm sıralanabilir eşyalarımın farklı yükseklikleri var. Her yer tutucunun yüksekliğini taşınan öğeyle eşleşecek şekilde nasıl değiştirebilirim?

jquery jquery-ui jquery-ui-sortable

— Oshirowanen
kaynak

JsFiddle'a gönderebilir misin?

— Satish

Bu, öğenizi başka bir yere sürükleyip bıraktığınızda mı oluyor? veya öğeler sayfayı yükledikten sonra zaten bu yüksekliğe sahip mi? yine de buraya bir göz atın: bugs.jqueryui.com/ticket/4482 ve belirtildiği gibi geçici çözümü deneyin

— Mohammad

254

Bunu genellikle yer tutucunun yüksekliğini startolaya sıralanan öğenin yüksekliğine ayarlayan bir geri arama bağlayarak çözerim . Yer tutucunuzun nasıl görüntülenmesini istediğiniz konusunda ayrıntılı kontrol sağlayan basit bir çözümdür.

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

Güncellenen test senaryosuna bakın

— Mekwall
kaynak

22

Ben şahsen ui.item.height () 'ı ui.helper.outerHeight () ile değiştirmek zorunda kaldım, çünkü kenar boşlukları ve öğenin gerçek yüksekliğini

— çarpıtıyor

üzgünüm ama iyi çalıştığını düşünmüyorum, bu bağlantıda jsfiddle.net/t8gcZ/1 , yer tutucu yüksekliği öğe yüksekliğiyle aynı (237px) ancak başlangıçta, alt öğenin bir çöp yukarı taşındığını görebiliyorduk

— Makio

1

@Makio Bu dolgu altından dolayı. Yer tutucuya alt dolgu eklemek bunu çözer. jsfiddle.net/t8gcZ/136

— mekwall

16

forcePlaceholderSize:trueMülkü ayarlamayı denediniz mi? JQuery UI Sortable dokümantasyon sayfasını okuyun .

— DarthJDG
kaynak

2

bunu denedim, ancak doğru veya yanlış eklemek, orijinal sitemi 10 piksel yüksekliğinde tutan hiçbir fark yaratmıyor. bu jsfiddle'da, doğru şekilde yeniden boyutlandırılır, ancak forceplaceholdersize ayarının true veya false olarak ayarlanması hiçbir fark yaratmaz. jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen: Hangi tarayıcıda test ediyorsunuz?

— DarthJDG

@oshirowanen: Aslında bozuk olduğu kodun bağlantısını gönderebilir misin?

— DarthJDG

2

Bu benim için çalışıyor. Tek yapmam gereken CSS'yi .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }değiştirmekti .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(bu yüzden yüksekliği kaldırın) Yani @DarthJDG haklısınız!

— JP Hellemons

Sadece yükseklik dinamik değilse çalışır @JPHellemons

— Erdal G.

2

Öğeleriniz display: blockmi? Satır içi öğeler, yer tutucunun yüksekliği doğru tutmamasına neden olabilir. Örneğin. Bu jsFiddle'ın anlattığınıza benzer bir sorunu var gibi görünüyor. Ekleme display: blockiçin .portletsınıf düzeltmeleri o.

— Gijs
kaynak

Aynısı yüzen elemanlar için de geçerli. Liste öğeleri yüzüyorsa, yer tutucu da yüzmelidir.

— Adrian Marinica

2

"Ui.item.height ()" kullanmak yerine "ui.helper [0] .scrollHeight" öğesini harici konteynerden bir öğeyi sürüklerken kararlı bir sonuç için kullanabilirsiniz.

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

— Elanchezhian Narayanasamy
kaynak

1

Sıralanabiliriniz için bir seçenek olarak yer tutucunuz için bir stil ayarlayabilirsiniz.

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

Ve sadece bu stile bir yükseklik ver. Umarım işe yarar.

— MANATTWeb
kaynak

2

Ama bu yüksekliği düzeltmez mi? İçerikle aynı yüksekliğe ihtiyacım var.

— oshirowanen

1

Benim durumumda , yer tutucunun yüksekliğini (ile ! Önemli ) özelliğe zorladığım ve ayrıca kendim için değişiklikleri görmek için arka planla görünürlüğü ayarladığım JP Hellemons'a benzer bir çözüm buldum (ayrıca yer tutucunuzu bu şekilde istediğiniz şekilde biçimlendirebilirsiniz. ).

Bu aynı zamanda 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

— user3780666
kaynak