Ở bài viết trước (Hướng dẫn dùng AJAX (jQuery) & PHP tạo giỏ hàng), chúng ta đã tạo ra một giỏ hàng đơn giản sử dụng AJAX và PHP. Lúc đó và cũng có thể là gần đây, có rất nhiều bạn đã hỏi mình cách sử dụng drag & drop cho giỏ hàng nhưng mình vẫn chưa có thời gian để viết bài hướng dẫn. Bây giờ, khi đã rảnh rỗi một tý và để đáp lại những câu hỏi đó, trong bài viết này, mình sẽ hướng dẫn bạn nâng cấp giỏ hàng sang drag & drop nhưng vẫn giữ nguyên base core ban đầu.

Nếu bạn chưa đọc bài viết trước thì vui lòng xem trước khi đọc tiếp bài viết này: Hướng dẫn dùng AJAX (jQuery) & PHP tạo giỏ hàng.

Trước hết, bạn cần mở file index.html ra và chuyển jQuery Lib của chúng ta sang phiên bản 1.4.2 và thêm vào là bộ UI của jQuery (mượn tạm file của anh Gồ vậy )

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

Mọi việc vẫn diễn ra như bình thường, tiếp tục mở file jquery.cart.js ra và sửa tất cả thành:

$(document).ready(function(){
    // for add item to cart
    $('[rel=addToCart]').click(function(){
        addToCart($(this));
    });
    // event drag - drop
    $('[rel=addToCart] img').draggable({
        containment: 'document',
        opacity: 0.6,
        revert: 'invalid',
        helper: 'clone',
        zIndex: 100
    });
    $("#cart").droppable({
        drop: function(e, ui) {
            addToCart($(ui.draggable).parent());
        }
    });

    function addToCart (_seft) {
        var _url = _seft.attr('href');
        $.ajax({
            url: _url,
            type: 'get',
            dataType: 'json',
            beforeSend: function (){
                _seft.parent().parent().find('.busy').show();
            },
            success: function(db) {
                _seft.parent().parent().find('.busy').hide();
                $('#totalItems').html(db.total);
                $('#totalPrice').html(db.price);
            }
        });
        return false;
    }
    /* .......................................................................... */
    // for remove all cart
    $('[rel=removeAllCart]').click(function(){
        var _seft = $(this);
        var url = _seft.attr('href');
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            beforeSend: function (){
                _seft.parent().parent().parent().find('.busy').show();
            },
            success: function(db) {
                _seft.parent().parent().parent().find('.busy').hide();
                $('#totalItems').html('0');
                $('#totalPrice').html('$0');
            }
        });
        return false;
    });
});

Nhìn vào đoạn mã trên, mọi thứ vẫn như xưa chả có gì thay đổi. Tớ chỉ tạo ra 1 function addToCart() để sử dụng lại mà thôi. Và mình thêm vài dòng nữa nhằm giúp cho các items product có event drag và drog. Đây là đoạn mã mới:

// event drag - drop
$('[rel=addToCart] img').draggable({
    containment: 'document',
    opacity: 0.6,
    revert: 'invalid',
    helper: 'clone',
    zIndex: 100
});
$("#cart").droppable({
    drop: function(e, ui) {
        addToCart($(ui.draggable).parent());
    }
});

Đoạn mã đầu tiên sẽ cho browser biết là thẻ image con của thằng attrubute rel == addToCart có thể drag được.

$('[rel=addToCart] img').draggable();

Còn mấy cái option thì bạn xem ở đây: http://docs.jquery.com/UI/Draggable.

Tiếp đến, các bạn phải viết event cho browser biết được rằng bạn kéo cái item product đến chỗ nào và có drop chính xác vào giỏ hàng không chứ hén ? Và cái thằng này sẽ làm nhiệm vụ đó:

$("#cart").droppable({ ... })

Trong option này chúng ta có dop: function (){...} hàm này sẽ được thực thi khi bạn thả item product bạn muốn mua vào giỏ hàng. (nhớ là lúc thả ra mới có hiệu lực nhé). Hàm này nhận vào 2 tham số là event và UI. Và phần tiếp theo của bạn chỉ việc gọi cái function addToCart để thực thi add giỏ hàng thôi.

Tác giả: Ken Phan (http://kenphan.info).