MENU

jQuery Sürükle Bırak Eklentisi ile Alışveriş Sistemi

Anasayfa » jQuery » jQuery Sürükle Bırak Eklentisi ile Alışveriş Sistemi
jQuery Sürükle Bırak Eklentisi ile Alışveriş Sistemi

jQuery Sürükle Bırak Yöntemi ile Alışveriş sistemi aslında bunu eticaret için yapmazsınızda bu sistemi menü mantığında yapabilirsiniz. Sürükle bırak ile menüleri kaydettirip hızlı bir sistem yapmış olursunuz :)

http://2.bp.blogspot.com/-s8iiYltCqZ0/UOXkA2Qo3mI/AAAAAAAAN8w/XTsyEZRUM6g/s1600/jquery+drop+down.jpg

Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial)

Demoya tıkladığınızda kodda sizde görüceksiniz jQuery 1.8.2 kullanılıyor bu yüzden çakışma olmamasına dikkat edin.

Demo / Download

Öncelikle aşağıdaki jQuery 1.8.3 ve Plugin’i html sayfanıza ekleyin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery-ui-1.9.0.custom.min.js"></script>

Ürünlerin bulunduğu HTML şu şekilde;

<section id="product">
    <ul class="clear">
        <li data-id="1">
            <a href="#">
                <img src="http://lorempixel.com/150/100/technics/1/" alt="">
                <h3>Product name</h3>
                <p>Product detail</p>
            </a>
        </li>
        <li data-id="2">...</li>
        <li data-id="3">...</li>
    </ul>
</section>

Alttaki HTML kısımda basket atıcağınız yani ürün sepeti kısmı :)

<aside id="sidebar">
    <div class="basket">
        <div class="basket_list">
            <div class="head">
                <span class="name">Product name</span>
                <span class="count">Quantity</span>
            </div>
            <ul>
            </ul>
        </div>
    </div>
</aside>

Şimdide jQuery fonksiyonumuzu çalıştırıyoruz.

// jQuery UI Draggable
$("#product li").draggable({

    // brings the item back to its place when dragging is over
    revert:true,

    // once the dragging starts, we decrease the opactiy of other items
    // Appending a class as we do that with CSS
    drag:function () {
        $(this).addClass("active");
        $(this).closest("#product").addClass("active");
    },

    // removing the CSS classes once dragging is over.
    stop:function () {
        $(this).removeClass("active").closest("#product").removeClass("active");
    }
});

Daha zarif olarak adlandırılmış fonksiyon şeklide aşağıdaki :)

// jQuery UI Droppable
$(".basket").droppable({

    // The class that will be appended to the to-be-dropped-element (basket)
    activeClass:"active",

    // The class that will be appended once we are hovering the to-be-dropped-element (basket)
    hoverClass:"hover",

    // The acceptance of the item once it touches the to-be-dropped-element basket
    // For different values http://api.jqueryui.com/droppable/#option-tolerance
    tolerance:"touch",
    drop:function (event, ui) {

        var basket = $(this),
                move = ui.draggable,
                itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']");

        // To increase the value by +1 if the same item is already in the basket
        if (itemId.html() != null) {
            itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
        }
        else {
            // Add the dragged item to the basket
            addBasket(basket, move);

            // Updating the quantity by +1" rather than adding it to the basket
            move.find("input").val(parseInt(move.find("input").val()) + 1);
        }
    }
});

Burasıda sepetteki kullanıcağınız jQuery fonksiyonu;

function addBasket(basket, move) {
    basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
            + '<span class="name">' + move.find("h3").html() + '</span>'
            + '<input class="count" value="1" type="text">'
            + '<button class="delete">✕</button>');
}

Sepetteki eklenenleri kaldırmanın kısa yoluda şu fonksiyonla oluyor;

$(".basket ul li button.delete").live("click", function () {
    $(this).closest("li").remove();
});

Evet bu yazıda burada bitti ama siz genede benim anlatımıma bakmadan birde gerçek makaleyide inceleyin ne olur ne olmaz :)

Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial)

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.