JQuery UI ile resimler nasıl sürüklenir ve alınır

bir örnek göstereceğiz görüntüleri bir web sayfasında nasıl hareket ettirir ve yakalar bir div'de bunun için JQuery UI kullanacağız. Kullanacağız sürüklenebilir Y bırakılabilir. Minimum stiller kullanılacaktır, bu eğitim onu ​​test etmek için güzel bir ortama sahip olmayı değil, yorumlanan işlevlerin nasıl çalıştığını görmeyi amaçlamaktadır. Kodun önemli bir komplikasyonu yoktur.

Örnekte bir çift resim ve kenarlıklı bir div olacak, amaç her resmi div'e taşımak ve onu yakalamak, HTML ile başlayan kodları göreceğiz.

HTML Kodu

HTML kodunun kısa olduğunu takdir edeceksiniz, sadece gerekli olan şey, öğreticinin önemli kısmı burada bulunmuyor.

 Sürüklemek  

Head bölümünde gerekli stili, oluşturduğumuz scripti ve JQuery UI scriptlerini import ediyoruz. Gövdede, sadece 2 resim ve bir div ekleyin, div'in bir kimliği ve bir sınıfı olan resimler var, böylece bunları betiğimizde işleyebiliriz.

CSS kodu

Başta da söylediğimiz gibi stiller bir öncelik değildir, sadece bu görev için gerekli olanlar kullanılacaktır.

 #frame {genişlik: 270 piksel; minimum yükseklik: 60 piksel; kenar boşluğu: otomatik; kenarlık: 1 piksel düz siyah; dolgu: 5 piksel; } .dropped {konum: statik! önemli; } 

Div'e bir kenarlık eklenir ve ortalanır, böylece görüntüyü ne zaman yakaladığını görebiliriz. Bırakılan sınıf statik hale getirilir, bu kısım en önemlisidir, çünkü bu sınıf div tarafından yakalandığında görüntüye eklenecektir.

JQuery kodu

Daha sonra açıklamak için aşağıdaki kodu koyacağız.

 $ (belge) .ready (işlev () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (") düştü "); $ (bu) .append (ui.draggable);}});})

sınıf yapıyoruz resmi taşı HTML'deki resimlerimize eklenen sınıf olan draggable. Bu görev zaten resimlerimizi sayfa içinde hareket ettirmemize veya sürüklememize izin veriyor, ancak yalnızca bu, bu kodla henüz "yakalanmadı". Bunun için div'de id ile droppable kullanacağız resim, droppable içinde, div'de bulunan görüntüyü bırakılan sınıfa ekleriz (CSS'yi hatırlayın, statik konum olmadan iyi çalışmaz) ve daha sonra bu, div'in içeriği olarak eklenir, bunun için ekleme kullanırız.

Şimdi örneği test edeceğiz, aşağıdaki resimde sayfanın nasıl başladığını görüyoruz:

Bir resmi hareket ettirmek şöyle görünecektir:

Ve son olarak, div'de 2 görüntüye sahip olduğumuzda, "sayfa" şöyle görünecektir:

Pencerenin boyutuna bağlı olarak görünümün biraz değişeceğine dikkat edilmelidir. Şimdiye kadar öğretici geldi, şimdi örneği istediğiniz kadar pratik yapabilir ve karmaşıklaştırabilirsiniz.

NotJQuery UI hakkında daha fazla bilgi edinmek istiyorsanız sayfalarını ziyaret edin. Daha fazla olasılık bulacaksınız ve örnekler göreceksiniz.