8
Açısal uygulamasında, bir <ul> ürününü sıralamak için ui-sıralanabilir kullanıyorum.Yeniden boyutlandırılabilir ve sıralanabilir elemanlarla esnek kutu ile duvar benzeri bir düzene sahip olmanın seçenekleri nelerdir
Öğelerin kendisi yeniden boyutlandırılabilir.
Bu aldığım kurulum benzer:
Ve "4" ve "5" üstlerinde yer kullanmasını istiyoruz:
İşte bir fiddle. Lütfen bunun çok basitleştirilmiş bir örnek olduğunu ve öğelerin aslında kullanıcı tarafından ve yeniden boyutlandırılabilir olduğunu unutmayın.
Duvarlar gibi kütüphaneler, kesinlikle konumlandırılmış elemanlar kullandıklarından, ui-sortable çalışma şeklini geri alacağından, yeniden boyutlandırma öğenin de itemeyeceği için yapmayacaktır.
Peki bunu nasıl başarabilirim?
- Bunun bir css tek çözümüyle mümkün olmadığını doğru anlamış mıyım? Bu esnek kutu en yüksek elemanın yüksekliğini alacak ve bu yüksekliği "satır"'a yerleştirecektir.
position: abolute'a güvenmeyecek herhangi bir js çözümü var mı, yoksa yine de sıralamama izin verecek mi?- benim benim seçeneklerim zaten var olan kütüphanelerden kurtulmak nedir?
- Benim sahip olduğum kütüphanelerden kurtulmak için seçeneklerim nelerdir?
Öğeleriniz, her alt öğe bir sütun içinde sütunlarla düzenlenmiş gibi görünüyor eşit genişlikte olmak. Eğer durum buysa, o zaman elemanlarınızı düzenlemek için flexbox'ı kullanabilirsiniz. Ekranda 'flex', 'flex-direction: column' ile 3 adet container div (her sütun için 1 tane) bulunuz ve her çocuğa flex: 1 1 auto' deyiniz. Kapsayıcı alanlarınızın 'width 've' height' değerlerini ayarlayın. – markE
Bu basitleştirilmiş bir örnektir, kutular temelde herhangi bir boyuttadır (ve kullanıcı tarafından değiştirilir), garanti edebileceğim tek şey belirli bir oranı/oranı tutmalarıdır. – Trufa
Yani tüm elemanlar orijinal boyutlarıyla orantılı olarak büyür veya küçülür? Sonra yorumlanmış çözümüm hala çalışıyor. Neyse, Masonluk ya da İzotop gibi bir dış kütüphane kullanmak, muhtemelen flexbox kullanmaktan ve çocuklarınızı sütun kapları arasında taşımaktan daha kolaydır. BTW, "kendi kendine yuvarla" yapmak istiyorsan, Google "bin ambalaj algoritmaları" nı yapabilirsin. Projenizde bol şanslar! – markE