$(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 <li> 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("<li id=\""+id+"\" title=\"Silmek için çift tıklayın\"><em>1 *</em> "+d.html()+"</li>"); } 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 <li> 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"); }
<body> <div class="tasiyici"> <div class="kutu urunGrid"> <h1>Ürünler</h1> <ul> <li id="1">Kalem <span>10<small> TL</small></span></li> <li id="2">Silgi <span>5<small> TL</small></span></li> <li id="3">Kalem Traş <span>2<small> TL</small></span></li> <li id="4">Defter <span>15<small> TL</small></span></li> <li id="5">Bant <span>3<small> TL</small></span></li> </ul> </div> <div class="kutu sepet"> <h1>Sepet <small>ürün yok</small></h1> <ul></ul> <div id="toplam"></div> </div> <div style="clear:both"></div> </div> </body>
ul{margin:0;list-style:none;padding:0} h1,li{margin:0;padding:0;} h1{color:#333;font-size:18px} h1 small{font-size:12px;color:red} body{font-size:13px;font-family:arial} .tasiyici{width:700px;margin:0 auto;} .kutu{width:300px;border:1px solid #c0c0c0;padding:5px} .kutu ul{} .kutu ul li{margin:5px;border-bottom:1px solid #eaeaea;padding:5px;width:280px;cursor:default} .kutu ul li em{color:Green} .kutu ul li span{font-weight:bold;display:block;text-align:right;float:right;font-size:16px} .urunGrid{float:left} .urunGrid ul li{cursor:move} .sepet{float:right;} #toplam{text-align:right;font-weight:bold;background-color:#ededed;padding:5px;font-size:18px;color:#5d5d5d;display:none}