JSFiddle - React, Tailwind, and code Playground

by apoStyLEE

HTML

<div class="tasiyici">
            <div class="kutu urunGrid">
                <h1>Ürünler</h1>
                <ul>
                    <li id="1">Asus Anakart <span>125<small> TL</small></span></li>
                    <li id="2">Intel İşlemci <span>23<small> TL</small></span></li>
                    <li id="3">Amd İşlemci <span>44<small> TL</small></span></li>
                    <li id="4">Sony Bilmemne <span>96<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>

CSS

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}

JavaScript

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