JavaScript Jquery

Jquery UI Sürükle Bırak ile Liste Oluşturma

Jquery Ui ile sürükle bırak işlemi

 Uygulamanın kaynak kodunu İNDİR

Jquery UI kullanarak sürükle bırak işlemleri hemen hemen her web sayfasında sıklıkla karşımıza çıkmakdır. E-ticaret sistemlerinde sepet, yönetim panellerinde menü düzenleme, iletişim formlarında çeşitli özellikleri eklemek ve çıkarmak için bir çok sayfada görmüşsünüzdür.

Bende bu makalede basit bir şekilde sürükle bırak işlemi ve sürüklenmiş nesneyi silme işlemini nasıl yapacağımızı anlatacağım. Uygulamanın bitmiş hali yukarıdaki bağlantıda yada sayfanın en altındaki kodlarda bulunmaktadır.

Makale ile birlikte yapmayı düşünenler sayfanın şablon indirebilirler. makale-sablonu

İndirdiğiniz şablon içinde html ve css sayfası yazılmıştır. Makalede sadece jquery kodlarını yazacağız. HTML ve CSS dosyasını inceledikten sonra  site.js açıp kodlarımızı yazmaya başlıyoruz.

İlk kodumuz her zamanki gibi document ready(jquery yüklendi) kodudur.

Belge yüklendi kodunun içine çalışmamızın kodlarını yazmaya başlıyoruz.

Liste classı içinde tasi classına sahip yani(.liste .tasi) nesnelerin sürüklenebilir olmasını sağlıyoruz.

 

Sürüklenen nesnenin sürükleme işlemi bittikten sonra eski yerine gitmesini istiyorsanız. draggable yapılan nesneye revert:true özelliğini ekliyoruz.

Bu işlemi de yaptıktan sonra sürükle bırak nesnemiz için yapılacaklar bitmiş durumda. Sürükle bırak için ile ilgili ek özellikler için sitemizdeki diğer makaleleri inceleyiniz.
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/
$(document).ready(function(e) {

 

Bırakma işlemi içinde sepet classına sahip olan etiketi droppable yapmamız gerekiyor. Üzerine bir nesne bırakıldığında nesneyi alabilmesi için nesneyi droppable yapan kodumuzu yazıyoruz.

 

Bırakma olayını kontrol etmek için drop olayına bırakma ile ilgili anonim fonksiyonumuzu yazıyoruz. bu fonksiyon iki tane parametre almaktadır.

birinci parametre olay(event), ikinci parametrede bırakma işlemine ait olan nesne(ui) bilgileridir.

 

Bırakılan nesne ui değişkeni ile gelen ui.draggable içindeki nesnedir.

1.Daha temiz kod yazabilmek için bu nesneyi nesne adında bir değişkene aktardım.

2. Bu nesnenin bir kopyasını oluşturdum(nesneyi sol taraftan koparmamak için).

3.kopyalanmış nesnenin içine(ilk etiket için prepend) kaldir classına sahip p etiketi ekledim.Not:Jquery ile etiket ekleme bu şekilde yapılabiliyor.

4.kopyalanmış nesne içinde taşıma sırasında yazılmış olan style kodlarını sildim.

Bu adımlara ait kodların tamamı aşağıdaki şekildedir.

 

Javasciptin güzel bir özelliği metodlar bir birlerine zincirleme ile eklenebilirler. (Prototype olma özelliği) Yukarıda 4 adımda yazdığım kodların tek satırda yazılmış hali aşağıdaki gibidir.

 

Bu açıklamadan sonra yazdığımız kod aşağıdaki şekilde oluşacaktır.

 

Kopya olarak oluşturulmuş olan nesneyi sepete eklemek için aşağıdaki kodu da yazdığımızda artık kopya nesnemiz sepete eklenmiş olacaktır. append metodu ile belirtilen nesne içine append içindeki etiketi eklemektedir. $(this) aktif olan nesneyi ifade etmektedir. şuan sepet aktif .append(kopya) ile sepet etiketi içine kopya nesnesini ekle demiş oluyoruz. Bu açıklamadan sonra kodumuz şu şekilde oluşur.

 

 

Sepete ekleme işleminde yaptıktan sonra şimdi sırada KALDIR yazısına tıkladığımızda eklenmiş olan nesneyi kaldırma işleminde. Bu işlemi yapmadan önce Jquerynin eski versiyonlarında kulanılan live metodu ile tek metod ile silme işlemi gerçekleştirile biliyordum. Yeni versiyonda bunu bulamadım. Sonradan eklemiş olan nesnelere ulaşmak için nesneyi oluşturduktan sonra o nesne için de tıklama olayını tanımlayacağım. Öncelikle örnek resim için tıklamayı nasıl yapacağımıza ait kodu yazalım.

 

 

closest: üstteki etiketlere çıkarak parantez içindeki seçiciyi arar. Bulana kadar üst etiketlere çıkarak devam eder.

remove: metodu ise seçilmiş olan etiketi silmek için kullanılır.

site.js dosyamız şu şekilde oluşacaktır. Unutmayın bu yazılan kod sonradan eklemiş olan için çalışmayacaktır. Örnek yazan resim için çalışacaktır. Bunu çözümünü de bir sonraki kod yıgını ile açıklayacağım.

 

Şimdi gelelim sonradan eklenmiş olan nesneye nasıl tıklama olayını ekleyeceğimize; kopya nesnesi oluşturulduktan sonra tıklama olayını tanımlayabiliriz. Kopya nesnesi aşağıdakine benzer bir şekildedir.

 

Kopya nesnesi içindeki kaldir classını bulup ona tıklama metodunu tanımlıyorum.  Yukarıda closest ve remove metodlarının çalışmasını açıklamıştım.

find:metodu closest metodunun tersine içeri doğru arama yapıp aranan etiketi bulmaya çalışır.

site.js dosyamızın son hali aşağıdaki gibi oluşur.

 

 

Aşağıdaki kodları örneğimizin tam halini göstermektedir.

Jquery, Jquery UI ve Jquery UI Css kodlarını projenize dahil etmeyi unutmayın.

HTML DOSYASI

 

CSS DOSYASI

 

JAVASCRIPT DOSYASI

 

Yorum

Yorum Yap