✅ JQuery UI ile Sürükle ve Bırak

İçindekiler

tişörtler
Çantalar
gadget'lar

Bazı pratik örneklere geçmeden önce jQuery UI'nin bizim için sahip olduğu Sürükle ve Bırak yöntemlerine bir göz atalım.
1- Sürüklenebilir yöntem ()
Sürüklenebilir yöntem, taşımak istediğiniz bir HTML sayfasının öğelerini yönetir, bu yöntem iki farklı şekilde kullanılabilir:

 • $ (seçici, bağlam) .draggable (seçenekler) • $ (seçici, bağlam) .draggable ("eylem", parametreler)

Bir örnek görelim:
İlk önce gerekli dosyaları eklemeliyiz, yapılan yaygın bir hata jQuery UI .js'yi jQuery .js'den önce eklemektir, jQuery'nin çekirdek olduğunu ve jQuery UI'nin yalnızca kitaplıklar, eklentiler, widget'lar olduğunu unutmayın, bunlar jQuery olmadan olmaz çalışacaktı.

Yöntemi çağırıyoruz:

 $ (fonksiyon () {$ ("#sürüklenebilir") .sürüklenebilir (;});

Ve onu div olacak seçiciyle ilişkilendiririz.

beni etrafta sürükle

İşte tam kaynak kodu:

jQuery UI Sürüklenebilir - Varsayılan işlevsellik

beni etrafta sürükle

Resim gönderildi

2- droppable () yöntemi
Droppable yöntemi, bir alana bırakmak istediğiniz HTML sayfasının öğelerini yönetir. Sürüklenebilir yöntem gibi, iki farklı şekilde kullanılabilir:

 • $ (seçici, bağlam) .droppable (seçenekler) • $ (seçici, bağlam) .droppable ("eylem", parametreler)

Bunun bir örneğine bakalım:
Dosyaları ekliyoruz, stilleri ekliyoruz, yöntemleri çağırıyoruz (burada sürüklenebilir yöntemi eşit olarak kullanacağız), ardından droppable yöntemi izliyoruz. İşte kaynak kodu:

jQuery UI Droppable - Varsayılan işlevsellik

Beni hedefime sürükle

Buraya bırak

Ve bu tarayıcıdaki çıktımız olacaktır:

Resim gönderildi

Her iki kavramı da alışveriş sepeti gibi daha karmaşık bir örnekte bir araya getirirsek ne olur? Görelim:
İlk önce dosyalarımızı ekliyoruz:

Sepetimize bazı stiller ekliyoruz:

Sepetimizi daha çekici hale getirmek için jQuery UI kitaplığından akordeon () yöntemini de kullanacağız, yöntemlerimizi çağırıp seçicilerle ilişkilendireceğiz, bu durumda sürüklenebilir yöntemin tüm işlevselliğini bir listeye genişleteceğiz:

Ve alışveriş sepetimiz şöyle görünecek:

Resim gönderildi

Test edebilmeniz için işte tam kaynak kodu:

 jQuery UI Droppable - Alışveriş Sepeti Demosu
tişörtler

Lolcat Gömlek
Cheezeburger Gömlek
Buckit Gömlek


Çantalar

Zebra Çizgili
Siyah deri
Timsah Derisi


gadget'lar

iPhone
ipod
iPad


Öğelerinizi buraya ekleyin