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.
|
1 2 3 4 5 6 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { }); |
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.
|
1 2 3 4 5 6 7 8 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { $(".liste .tasi").draggable(); }); |
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) {
|
1 2 3 4 5 6 7 8 9 |
$(".liste .tasi").draggable({ /*taşıma işlemi yapıldıktan sonra nesneyi eski yerine getirir.*/ revert:true }); }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { /*sürükleme işlemi*/ $(".liste .tasi").draggable({ /*taşıma işlemi yapıldıktan sonra nesneyi eski yerine getirir.*/ revert:true }); /*sepetin bırakılabilir olması*/ $(".sepet").droppable({ //bırakma ile ilgili kodlar buraya yazılacak }); }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { /*sürükleme işlemi*/ $(".liste .tasi").draggable({ /*taşıma işlemi yapıldıktan sonra nesneyi eski yerine getirir.*/ revert:true }); /*sepetin bırakılabilir olması*/ $(".sepet").droppable({ drop:function(event,ui){ /*bırakma olayı gerçekleştiğinde çalışacak fonksiyon*/ } }); }); |
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.
|
1 2 3 4 5 6 |
var nesne =ui.draggable; var kopya=nesne.clone(); kopya.prepend("<p class='kaldir'>KAPAT</p>"); kopya.attr('style',''); |
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.
|
1 2 3 |
var kopya= ui.draggable.clone().prepend("<p>KAPAT</p>").attr('style',''); |
Bu açıklamadan sonra yazdığımız kod aşağıdaki şekilde oluşacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { /*sürükleme işlemi*/ $(".liste .tasi").draggable({ /*taşıma işlemi yapıldıktan sonra nesneyi eski yerine getirir.*/ revert:true }); /*sepetin bırakılabilir olması*/ $(".sepet").droppable({ drop:function(event,ui){ // nesne =ui.draggable; // kopya=nesne.clone(); // kopya.prepend("<p class='kaldir'>KAPAT</p>"); //kopya.attr('style',''); var kopya= ui.draggable.clone().prepend("<p class='kaldir'>KALDIR</p>").attr('style',''); } }); }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { /*sürükleme işlemi*/ $(".liste .tasi").draggable({ /*taşıma işlemi yapıldıktan sonra nesneyi eski yerine getirir.*/ revert:true }); /*sepetin bırakılabilir olması*/ $(".sepet").droppable({ drop:function(event,ui){ var kopya= ui.draggable.clone().prepend("<p class='kaldir'>KALDIR</p>").attr('style',''); $(this).append(kopya); } }); }); |
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.
|
1 2 3 4 5 6 7 |
/*.sepet içindeki .kaldir nesnesine tıklandığında yapılacak işlemler*/ $(".sepet .kaldir").on('click',function(){ /*closest yukarı doğru arama yaparak ilk eşleşen etiketi seçer. .kaldir hangi .tasi içindeyse onu seçmiş oluyoruz.*/ $(this).closest('.tasi').remove(); }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { /*sürükleme işlemi*/ $(".liste .tasi").draggable({ /*taşıma işlemi yapıldıktan sonra nesneyi eski yerine getirir.*/ revert:true }); /*sepetin bırakılabilir olması*/ $(".sepet").droppable({ drop:function(event,ui){ var kopya= ui.draggable.clone().prepend("<p class='kaldir'>KALDIR</p>").attr('style',''); $(this).append(kopya); } }); /*.sepet içindeki .kaldir nesnesine tıklandığında yapılacak işlemler*/ $(".sepet .kaldir").on('click',function(){ /*closest yukarı doğru arama yaparak ilk eşleşen etiketi seçer. .kaldir hangi .tasi içindeyse onu seçmiş oluyoruz.*/ $(this).closest('.tasi').remove(); }); }); |
Ş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.
|
1 2 3 4 5 6 7 |
<div class="tasi" id="nesne-5"> <p class="kaldir">KALDIR</p> <h1>Kaplan</h1> <img src="resim/r5.jpg"> </div> |
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.
|
1 2 3 4 5 6 |
kopya.find('.kaldir').click(function(){ kopya.closest('.tasi').remove(); }); |
site.js dosyamızın son hali aşağıdaki gibi oluşur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { /*sürükleme işlemi*/ $(".liste .tasi").draggable({ /*taşıma işlemi yapıldıktan sonra nesneyi eski yerine getirir.*/ revert:true }); /*sepetin bırakılabilir olması*/ $(".sepet").droppable({ drop:function(event,ui){ var kopya= ui.draggable.clone().prepend("<p class='kaldir'>KALDIR</p>").attr('style',''); $(this).append(kopya); /*DİKKAT: kopya nesne içindeki kaldır yazısına tıkladğımızda kaldırma işlemini yapması için tanımladık.*/ kopya.find('.kaldir').click(function(){ kopya.closest('.tasi').remove(); }); } }); /*.sepet içindeki .kaldir nesnesine tıklandığında yapılacak işlemler*/ $(".sepet .kaldir").on('click',function(){ /*closest yukarı doğru arama yaparak ilk eşleşen etiketi seçer. .kaldir hangi .tasi içindeyse onu seçmiş oluyoruz.*/ $(this).closest('.tasi').remove(); }); }); |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Sürükle Bırak</title> <link rel="stylesheet" type="text/css" href="jquery-ui.css"> <link rel="stylesheet" type="text/css" href="tasarim.css"> <script src="jquery-1.12.1.min.js"></script> <script src="jquery-ui.js"></script> <script src="site.js"></script> </head> <body> <div class="liste"> <div class="tasi" id="nesne-1"> <h1>Köpek</h1> <img src="resim/r1.jpg"> </div> <div class="tasi" id="nesne-2"> <h1>Kedi</h1> <img src="resim/r2.jpg"> </div> <div class="tasi" id="nesne-3"> <h1>Panda</h1> <img src="resim/r3.jpg"> </div> <div class="tasi" id="nesne-4"> <h1>Sincap</h1> <img src="resim/r4.jpg"> </div> <div class="tasi" id="nesne-5"> <h1>Kaplan</h1> <img src="resim/r5.jpg"> </div> </div> <div class="sepet"> <div class="tasi" id="nesne-5"> <p class="kaldir">KALDIR</p> <h1>Örnek</h1> <img src="resim/r5.jpg"> </div> </div> </body> </html> |
CSS DOSYASI
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/*****LİSTE*****/ .liste{ width:720px; float:left; } .liste div{ float:left; width:200px; background:#EBDF8F; margin:10px; padding:10px; z-index:2; cursor:move; } .liste img{ width:100%; } /********SEPET***********/ .sepet{ right:0; top:0; background:#EF7375; padding:20px; width:500px; min-height:600px; position:fixed; } .sepet .tasi { float:left; width:100px; background:#EBDF8F; margin:10px; padding:10px; z-index:2; } .sepet .tasi img{ width:100%; } |
JAVASCRIPT DOSYASI
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { $(".liste .tasi").draggable({ /*taşıma işlemi yapıldıktan sonra nesneyi eski yerine getirir.*/ revert:true, }); $(".sepet").droppable({ drop:function(event,ui){ /*fonksiyon ile gelen ui.draggable elementi taşınan nesneyi verir*/ var nesne =ui.draggable;//taşınan nesneyi seçer. var kopya=nesne.clone();//taşınan nesnenin kopyasını oluşturur. kopya.prepend("<p class='kaldir'>KAPAT</p>");//kopya nesnenin içine p etiketi ekler. (prepend etiket başına ekle) kopya.attr('style','');//kopya nesnenin içindeki style etiketinde bulunan stil kodlarını siler. /*yukarıdaki 4 satırlık kodu tek satırda yazmak için aşağıdaki kod kullanılabilir.*/ //var kopya= ui.draggable.clone().prepend("<p>KAPAT</p>"); /*DİKKAT: kopya nesne içindeki kaldır yazısına tıkladğımızda kaldırma işlemini yapması için tanımladık.*/ kopya.find('.kaldir').click(function(){ console.log(kopya.html()); kopya.closest('.tasi').remove(); }); $(this).append(kopya);//sepet nesnesinin içine kopya nesnesini ekler. } }); /*kaldır yazısına tıkladığımızda kaldırır. DİKKAT:kopya olarak oluşturulan nesneler jquery kütüphanesine sonradan eklendiği için bu metod kopyalamalar içinde çalışmayacaktır. aynı metodu kopyalama yaptığımız bölümde de kullanmamız gerekir. */ $(".sepet .kaldir").on('click',function(){ $(this).closest('.tasi').remove(); }); }); |
php kullanarak bu mantıkla veritabanı işlemini nasıl yapabilirim ?
Elinize sağlık güzel bir paylaşım olmuş. Hocam bir sorum olacaktı. Sorum şu nesneyi taşımasak sadece kopyasını oluşturup yeni alana aktarsak bu JqueryUI de mümkün mü?
Tabi ki mümkün. Jquery clone metodu bu işlemi gerçekleştiriyor.
https://api.jquery.com/clone/
Bu adresten inceleme yapabilirsin
[…] Jquery UI Sürükle Bırak Liste […]
[…] Jquery UI Sürükle Bırak ile Liste Oluşturma […]