Edit in JSFiddle

 $(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}