Sürükle Bırak Yöntemi İle Veri Aktarma Jquery Php (Draggable)

Merhaba bu yazıda Draggable metodundan bahsedeceğim. Draggable, fonksiyon olarak bir nesneyi sayfa içinde sürükle bırak işlemlerinde hareket özelliği kazandırıyor. Bu metot Jquery UI  ile gelen Sortable metoduna göre çok yönlü kullanma imkanı sağlıyor. Bu özellik ile dosya sürükleme işlemi de yapılabilir. Dokümantasyon: https://jqueryui.com/draggable/

Draggable fonksiyonuna tanıtmış olduğumuz herhangi bir id ya da class ile direk kullanma imkânı sağlıyor. Sürükleme esnasında taşınan bir nesnenin, $(this).attr(“id”); yardımıyla ya da attr kısmına atayacağınız herhangi bir değeri öğrenebiliyoruz. Bu değeri kullanarak yetkilendirme işlemlerini belirleyebiliriz.

Gelelim bunu kullanmaya. Ben sitemde kullanabilmek için farklı bir amaca göre işlem kullanıyorum ama genel olarak php ile çalışmasına değineceğim kodları dilerseniz kopya ile ya da kendiniz de yaza birisiniz.

Başlangıçta sayfamızda çalışması için jquery-ui.js adlı dosyayı indiriyoruz ve jquery-ui.js adlı dosyayı sayfamıza ekliyoruz.  İndirme sayfası: https://jqueryui.com/download/

Veri tabanı ile çalışacağımız için yetkiler adında bir tablo ve içerisine id ve yetki_ad ve yetki_aciklama sütunlarını oluşturuyoruz;

Yetkiler tablosunu oluşturma

Burada id’yi auto_increment yapıyoruz ileride yeni değerler girilmesene kolaylık sağlasın diye.

Bir diğer tablo ise yetkilerin üye ya da kullanıcıya ekleneceği alan olmalı uye_yetki_id olarak belirledik;

Uye tablosu

Tablo ön izlemesi;

Üyelerin listelemesi

Düzenleye tıkladığımız zaman açılan modal penceresi;

Üye yetkilerin modal penceresinde gösterimi

Genel görünüm bu şekilde olacaktır, dilerseniz farklı bir görünümde tasarlayabilirsiniz.  

Tablonun kodlaması;

openedit(id) ile belirttiğimiz alanın ve listsil() ile yetkilerin silineceği fonksiyonlar tablo ile aynı sayfada;

CSS kısmında modal içerisinde ki yetkilerin düzenli görünümü sağlayan kodlar;

Şimdi fonksiyonu çalıştırarak kodların ve fonksiyonun çalışmasına bakalım;

Tabloda buluna edit butonuna tıkladığımızda üye id değerini uyeler_detay.php sayfasına post ediyoruz. Aşağıda uyeler_detay.php sayfasının içeriği bulunmakta;

Yukarıda gerçekleşen olaylar dizini sıralayalım.

Başlangıçta iki php fonksiyonumuz bulunmakta, birincisi üye_yetki_id değerlerinin yetkiler adlı tablodaki id ile karşılaştırarak yetkini adını öğrene bileceğimiz bir fonksiyon. İkincisi ise hazırda kayıtlı yetkilerin hazır listesi bulundurmak ve bunları yapmamızda ki sebep ise kolaylık sağlamaktır.

Burada dikkat etmemiz gereken kısım yetkiler fonksiyonunda li taglarına “draggable” idsini vermeniz. Bu class ile draggable fonksiyonunu tetikleyecektir ve bulunduğu id değerini öğrenebileceğiz.

Post edilen üye id değerini sorguluyoruz ve modal divlerinin içerisine yazdırıyoruz, burada grid ile böldüğümüz divlerden ilkine ul tagına ikinci ve fonksiyona dâhil olan id “sortable” değerini ekliyoruz. Bu id ile draggable fonksiyonu nesneni hangi alana çekilmesi gerektiğini öğrenmiş olacak ve bu alan da bildiğimiz üzere yetkilerin alınacağı alan olacaktır.

İki div ile böldüğümüz modal penceresinde listeleme ul li ile gerçekleşiyor. Modal gövde kısmının altında bulunan Jquery fonksiyonları draggable metodunu çalıştırmakta.

Draggable fonksiyonu sürükleme başladığı anda devreye giriyor ve fonksiyonun içindeki olaylar kısmını çalıştırıyor. Burada;

connectToSortable: "#sortable" bağlantılı olacağı ve sürüklenecek nesnenin varış alanını belirler,

helper:"clone" sürükleme esnasında sürüklenen nesnenin kopyasını alacaktır,

stop: işlem bitince yapılacak fonksiyonu çalıştıracaktır.

Stop ile yapılacak iş tanımı taşınan nesnenin id değerin alarak cartAction("ekle",nesnenin_id,"uye_id",önceki_idler) fonksiyonun çalıştıracaktır.

Droppable fonksiyonu ise nesne taşınacak alanın üzerine bırakılacağı esnada yapılacak işlemleri yapmakta hoverClass: "set” ile class ekleme yaparak style değişikliği sağlıyor.

    cartAction() fonksiyonu eklenecek nesnenin id değerini yetki_ekle.php sayfasına post ederek sonucunu id değeri “kayitli_yetki“ olan dive yazacaktır.

yetki_ekle.php sayfasının kod yapısı;

Burada diğer modal sayfasından farklı olarak veri tabanına update görevi yapmaktadır. Post olarak gönderilen action değerinde ekle verisi geçiyorsa nesne idsini uye_yetki_id sütununa ekliyor diğer koşulda sil geçiyorsa üye_yetki_id değeri boşatıyor. Ve sonuçları önceden tanımlı sayfaya yazdırıyoruz.

İki sayda da ayın jquery kodlarını yazmamızdaki sebep fonksiyonu tekrar çalışır hale getirmek içindir.

Biraz uzun bir yazı oldu ancak yapılan işlemler güzel bir işe hizmet ediyor. Sorular ve sorunlarınız için yorum yapmayı unutmayın daha fazla destek için iletişime geçebilirsiniz. Teşekkürler…