jQuery UI sürükle bırak ile alış veriş sepeti mantığı

apoStyLEE — Thu, 18 Aug 2011 07:01:36 +0000

Uzun zaman önce hayalini çok kurduğumuz fakat yeterince javascript bilmemekten ve kütüphanelerin bu denli gelişmiş olamayışından dolayı bir türlü gerçekleştiremediğimiz bir olaydı bu. Nereden aklıma geldi bilmiyorum, fakir bir çocuğun zengin olduğunda hayalini kurup bir türlü yapamadığı şeyi yapması heyecanıyla sarıldım web matrixe :) Heeeeeman, güç bende artık !

Senaryomuz şu şekilde, bir tarafta ürünlerimiz var diğer tarafta ise alış veriş sepetimiz. Kullanıcı almak istediği ürünü sürükleyip sepete bırakıyor. Aynı ürünü tekrar sepete attığında sadece adet bir artıyor. Ürünü sepetinden çıkartmak istediğinde ise, üzerine çift tıklıyor. Bu işi yapmak için jQuery ve jQueryUI kullanıyoruz. En can alıcı noktamız ise jQuery UI nin Draggable ve Droppable özelliği. Kodların üzerinde açıklamalar bulunuyor.

        $(document).ready(function(){

            // Sürükleme yapılacak elemanları seçiyoruz.
            $(".urunGrid ul li").draggable({
                revert:true,
                helper: "clone"
            });

            // Üzerine elemanları alacak olan kısmı belirtiyoruz. Yani sepetimiz.
            $(".sepet").droppable({
                drop: function( event, ui ) {
                    var t = $(this);
                    var d = ui.draggable; // bu bizim tuttuğumuz eleman yani  elementi
                    var ul = t.find("ul"); // Sepetimizin içindeki ul elementimiz.
                    var id = d.attr("id"); // tuttuğumuz ürünün id si.
                    var idToLi = ul.find("#"+id); // sepette, tuttuğumuz id ye sahip ürünü seçiyoruz.
                    var adet;

                   // Veritabanına yazma işlerini burada yapabilirsiniz. (ajax)                    

                    idToLi.fadeOut().fadeIn(); // şeklimizi yapıyoruz :)

                    // eğer daha önce ürün ekli değilse ekliyoruz, ekliyse adetini 1 arttırıyoruz.
                    if(idToLi.html()==null){
                        ul.append("
1 * "+d.html()+"");
                    }
                    else{
                        adet = parseInt(idToLi.find("em").text().replace(" *",""));
                        idToLi.find("em").text(adet+1+" *");
                    }
                    toplam(); // sepetin altına toplam alan fonksiyonu çağırıyoruz.
                }
            });

            // Sepetteki ürüne çift tıklandığında silinmesini sağlıyoruz.
            $(".sepet ul li").live("dblclick", function() {
                var adet = parseInt($(this).find("em").text().replace(" *", ""));
                if (adet == 1) {
                    $(this).remove();
                }
                else {
                    $(this).find("em").text(adet-1+" *");
                }
                toplam(); // Ürün silindiğinde toplamın yeniden hesaplanmasını sağlıyoruz.
            });
        });

        function toplam(){
            var toplam=0;
            var t;
            var fiyat;
            var adet;

            // Eğer sepette ürün yoksa "ürün yok" ibaresini görünmez yapıyoruz.
            if($(".sepet ul li").length != 0){
                $(".sepet h1 small").fadeOut();
            }
            else
            {
                $(".sepet h1 small").fadeIn();
            }

            // Sepetin içinde ki ürünleri yani  leri döndürüp toplama işlemini yapıyoruz.
            $(".sepet ul li").each(function(){
                t = $(this);
                fiyat = parseFloat(t.find("span").text().replace(t.find("span small").text(),""));
                adet = t.find("em").text().replace(" *","");
                toplam += (fiyat*adet);
            });

            // toplamı ilgili alana yazdırıyoruz.
            $("#toplam").fadeIn().text($(".sepet ul li").length+" Ürün, Toplam: "+toplam+" TL");
        }

    
        
            
                Ürünler
                
                    Asus Anakart 125 TL
                    Intel İşlemci 23 TL
                    Amd İşlemci 44 TL
                    Sony Bilmemne 96 TL
                
            

            
                Sepet ürün yok

Sürükle bırak gibi dışarıdan karışık gelen bir olayı jQuery sayesinde çok basit bir şekilde çözdük. Bu konuyla ilgili ufak tefek denemeler yaparak olayı daha iyi kavraya bilirsiniz. Aşağıda çalışan örneği görebilirsiniz, umarım faydalı bir yazı olmuştur :)

jQuery ile sürükle bırak yaparak sıralama işlemi

apoStyLEE — Sat, 25 Jul 2009 14:27:00 +0000

Sıralamadan kastım, kategori sıralama olabilir, eklenti sıralama olabilir, yazı sıralama olabilir vb.. Normalde sıralama işlemlerini yapabilmek için epeyce kod yazmaktan ziyade kullanıcının nasıl en rahat şekilde kullanabileceğinin hesabını kitabını sıklıkla yapıyoruz. Sağolsun jQuery‘ nin Ui (kullanıcı arayüzü (user interface)) imdadımıza yetişiyor. Önce sıralama (sortable) fonksiyonunu kullanıyoruz, daha sonra veriyi serileştiriyoruz (serialize) sonrada ajax ile postalıyoruz.Hemen kodlarımıza bakalım. Öncelikle bu iki dosyayı Jquery Ui indirelim ve sayfamıza ekleyelim.Veritabanımızdaki kategoriler tablomuz.

	CREATE TABLE [kategoriler] (
	  [id] int IDENTITY(1, 1) NOT NULL,
	  [kategoriadi] nvarchar(50) NULL,
	  [sira] int NULL,
	  PRIMARY KEY CLUSTERED ([id])
	)
	ON [PRIMARY]
	GO

sirala.aspx sayfamızın içeriği

	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		margin-top: 10px;
	}
	#icerik ul{
	    margin:0;width:300px
	}
	#icerik ul li {
		list-style: none;
		margin: 0 0 4px 0;
		padding: 5px;
		background-color:#007dd5;
		color:#fff;
	}
	#icerik li:hover{
	    cursor:move;
	}
	.yeniyer{border:2px dotted #860101}

Sirala.aspx.cs sayfamızın içeriği

 protected void Page_Load(object sender, EventArgs e)
 {
 if(!IsPostBack)
 {
 listeDoldur();
 }
 }

protected void listeDoldur() {
 DataTable dt = veritabani.DataTableGetir("select * from kategoriler order by sira asc");
 foreach (DataRow dr in dt.Rows)
 {
 liste.Text += "

	" + dr["kategoriadi"].ToString() + "

";
 }
 }

kaydet.aspx.cs sayfamızın içeriği, yani sıralama işlemlerini veritabanına yazan sayfamız.

 protected void Page_Load(object sender, EventArgs e)
 {
 string gelen = Request.Form.ToString().Replace("%5b%5d", "[]").Replace("sira[]=", "");
 char[] ayrac = new char[] { '&' };
 string[] gelenler = gelen.Split(ayrac);
 int i = 1;
 foreach (string veri in gelenler)
 {
 veritabani.guncelle("Update kategoriler set sira='" + i + "' where id=" + veri + " ");
 i++;
 }
 }

Örneğin tamamını indirmek için tıklayın. Çalışan örneğe buradan bakabilirsiniz.

asp.net, jquery ve diğer web teknolojileri üzerine » drag drop

jQuery UI sürükle bırak ile alış veriş sepeti mantığı

Ürünler

Sepet ürün yok

jQuery ile sürükle bırak yaparak sıralama işlemi