JQuery sıralanabilir (çeşitli yüksekliklerde olan öğe)

Question

Sorun

Çeşitli yüksekliğinin birkaç madde ile benim sıralanabilir listede sorun yaşıyorum zahmetli. Sorun, daha büyük bir öğeyi ilk veya son konuma taşımaya çalıştığımda (her ikisi de daha küçük nesneler olan) ortaya çıkar. Eğer başarılı olursam şu anda büyük öğenin üzerinde nereye sürüklendiğimi ve sürüklemeye başladığıma çok bağlıyım.

Öğeyi daha küçük alt konuma taşımak istiyorum, çalışabilmesi için öğenin alt kısmına yakın bir yere tıklamam gerekiyorsa ve bunu en üst konuma sürüklemek gerekirse, yukarı doğru tıklamak zorundayım. Ama ben herhangi bir yere tıklayarak öğeyi sürüklemek mümkün olmak istiyorum.

ürün ebeveyn dışında sürüklenen ve olması vardır ve bu konteyner var daha büyük ise bir kaydırma göründüğü gibi ebeveyn sadece kadar büyük olduğunu edilemez

Bazı ek bilgiler. Öyle görünüyor ki, büyük parçayı, öğenin üst kısmına sürüklemezsem, ilk (küçük) öğeyi geçemiyorum.

Bunu, cursorAt kullanarak ve en üst: 0'ı kullanarak ve alt kullanarak başka bir test kullanarak çözmeye çalışıyorum: 0 Ancak, herhangi bir fark yaratmıyor gibi görünüyor (bu yüzden nasıl kullanıldığını yanlış anlamış olabilir). Şu anda toleransı kullanıyorum: işaretçi.

Tasnif edilen öğenin yüksekliğiyle yükseklik arttıkça sıralama sırasında daha büyük öğeyi geçici olarak son konuma sürükleyememe sorununu atlayabilirim. Ama her zaman işe yaramıyor ve çok iyi bir çözüm değil. Ve onu yukarı sürükleyememe sorunu hala görünüyor? kullanıcı öğe üzerinde herhangi bir yere tıklayın izin verirken nasıl üst veya alt pozisyona daha büyük bir öğeyi sürükleyebilir:

Ben jquery-sortable-with-containment-parent-and-different-item-heights

Soru olduğu gibi JQuery kod değiştiremiyorum?

Yardımlarınız için teşekkürler!

Answer 1

Bu sorununuzu çözmeyebilir, ancak bugün yaptığım bazı deneme sonuçlarını paylaşacağımı düşündüm. Değişken genişliklerdeki satır içi resimlerle sıralı bir fotoğraf galerisi yapmam gerekiyordu ve daha geniş fotoğrafların taşınmasının çok zor olacağını, çünkü yer tutucunun hareket ettiğim öğeden daha küçük olduğunu buldum. Bunu kullanarak sona erdi:

container.sortable({ 
     placeholder: "photo placeholder", 
     start: function (event, ui) { 
      ui.placeholder.width(ui.item.width()); 
     } 
    }); 

tutucu sınıfları yer tutucu varsayılan olarak gizlidir ve start olay tutucusu, üzereyiz öğe olarak aynı genişlikte olmasını sağlar değildir orada sağlamak için vardır özel hareket. Bu benim için çok iyi çalıştı ve senin durumunda, genişlik için yükseklik yerine çalışabilir.

Ayrıca yaptığınız gibi containment kullanmayı denedim ve bazen satırdaki öğelere bağlı olarak işleri çok daha zorlaştırdığını fark ettim. Açıkladığınız gibi, tolerance: "pointer", sorunları hafifletmeye yardımcı olur, ancak mümkünse, containment'un kaldırılması, UI'yi daha fazla bağışlayıcı yapar.