Đối với ứng dụng này, mình dùng SQL Server 2005 Express để tạo một CSDL đơn giản có tên là ToyShopDatabase, có một bảng duy nhất tên là TblToys, gồm có 4 trường: ToyID, Title, ImageUrl và Price.

Để hiển thị dữ liệu, mình sử dụng một Datalist. Hàm BindData() dưới đây được sử dụng để nhận dữ liệu từ CSDL.

private void BindData()
    {
        string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        SqlConnection myConnection = new SqlConnection(connectionString);

        SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM tblToys", myConnection);
        DataSet ds = new DataSet();
        ad.Fill(ds);

        dlToys.DataSource = ds;
        dlToys.DataBind();
    }

Bạn có thể nhìn thấy các Item được hiển thị trong hình ảnh dưới đây:

Chúng ta biết rằng các thẻ DIV sẽ được coi như là một đối tượng có thể kéo đi được. Tuy nhiên có rất nhiều thẻ DIV trong một trang, vậy làm thế nào có thể xác định được thẻ DIV nào thuộc đặc tính kéo và thả này?  Chúng ta sẽ sử dụng một biểu thức quy tắc để lọc những thẻ DIV đúng:

var dragElementPattern = ".+_a$";

var divElements = document.getElementsByTagName("div");     

for(i=0;i<divElements.length;i++)
{  
   
    if(IsMatch(divElements[i].id, dragElementPattern))
    {           
        MakeElementDraggable(divElements[i]); 
    }
}

Đầu tiên, chúng ta sẽ tìm và nhận tất cả các thẻ DIV có trong  trang web, sau đó tìm các thẻ DIV đúng bằng các biểu thức quy tắc. Chức năng IsMatch() sẽ chịu trách nhiệm tìm ID của các phần tử phù hợp với Pattern:

function IsMatch(id, pattern)
{
    var regularExpresssion = new RegExp(pattern);
    if(id.match(regularExpresssion)) return true;
    else return false;
}

Việc tạo một bản sao cho sản phẩm khi kéo sản phẩm vào giỏ hàng là rất cần thiết. Nếu không tạo bản sao cho thi hình ảnh thật sẽ mất đi khi chúng ta kéo và thả chúng vào giỏ hàng.

function InitiateDrag(e)
{   
    mouseState = 'down';
   
    var evt = e || window.event;
   
    startX = parseInt(evt.clientX);
    startY = parseInt(evt.clientY);   
   
    clone = obj.cloneNode(true);
          
    clone.style.position = 'absolute';  
    clone.style.top = parseInt(startY) + 'px';
    clone.style.left = parseInt(startX) + 'px'; 
   
    document.body.appendChild(clone);    
   
    document.onmousemove = Drag;
    document.onmouseup = Drop; 
   
    return false;            
}

hiện nay có rất nhiều trình duyệt khác nhau, vì vậy mà việc tạo một zone thích ứng với trình duyệt tương đối khó. Sự kiện Drop chỉ thành công khi sản phẩm được thả vào đúng drop zone. Thực chất thì nó dựa vào vị trí của con trỏ khi ta thả tay và vị trí của Drop Zone.

function InitiateDrag(e)
{   
    mouseState = 'down';
   
    var evt = e || window.event;
   
    startX = parseInt(evt.clientX);
    startY = parseInt(evt.clientY);   
   
    clone = obj.cloneNode(true);
          
    clone.style.position = 'absolute';  
    clone.style.top = parseInt(startY) + 'px';
    clone.style.left = parseInt(startX) + 'px'; 
   
    document.body.appendChild(clone);    
   
    document.onmousemove = Drag;
    document.onmouseup = Drop; 
   
    return false;            
}

Nếu sản phẩm không được thả vào trong vùng Drop Zone thì sản phẩm chỉ biến mất đi thôi. Tuy nhiên nếu đúng trong vùng đó thì sản phẩm sẽ được cho vào Shopping Cart. Chức năng AddPrice sẽ có nhiệm vụ cập nhật Tổng tiền và hiển thị sản phẩm trên Shopping Cart. Mỗi sản phẩm được chèn vào bên trong một thẻ DIV mà sau đó sẽ được chèn vào trong vùng Drop Zone.

function AddPrice()
{  
         
   var title = GetProductTitle();
   var price = GetProductPrice();
  
      
    var dZone = document.getElementById("dZone");
    var textNode = document.createTextNode(title);   
    var priceNode = document.createTextNode(price);
       
    var spaceNode = document.createTextNode(':  $');  
    var paragraphElement = document.createElement('p');
   
    // create the delete button
   
    var deleteButton = document.createElement('button');
    deleteButton.value = 'Delete';
    deleteButton.innerHTML = 'Delete';
    deleteButton.onclick = DeleteItem;
   
    var item = document.createElement('div');
    item.id = 'itemDiv' + uniqueNumber;
     
    item.appendChild(paragraphElement);    
    item.appendChild(textNode);
    item.appendChild(spaceNode);
    item.appendChild(priceNode);
    item.appendChild(spaceNode);
    item.appendChild(deleteButton);
   
    dZone.appendChild(item); 
   
    // increment the price
    IncrementTotal(price);
    uniqueNumber++;
   
}

2 hàm GetProductTitle() và GetProductPrice() được sử dụng để lấy Title và Price từ sản phẩm. Biến uniqueNumber được sử dụng để tạo ra mã duy nhất cho mỗi thẻ DIV mới được tạo ra. Nó sẽ tăng giá trị mỗi khi một sản phẩm được cho vào giỏ hàng. Chức năng IncrementTotal() để sử dụng để tính tổng giá sản phẩm trong giỏ hàng.

Bên cạnh tên và giá sản phẩm, ta để luôn một nút Delete để có thể xóa sản phẩm trực tiếp. khi nhấn nút đó, sản phẩm tương ứng sẽ bị xóa ngay khỏi giỏ hàng.

function DeleteItem(e)
{   
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;
   
    if(IsFireFox())
    {
        price = evtTarget.parentNode.childNodes[2].nodeValue;
        evtTarget.parentNode.parentNode.removeChild(evtTarget.parentNode);
    }   
    else
    {     
    price = evtTarget.parentElement.childNodes[2].nodeValue;
    evtTarget.parentElement.parentElement.removeChild(evtTarget.parentElement);
    }
      
    DecrementTotal(price);
}

Còn chức năng DecrementTotal() dùng để cân bằng lại tổng giá trị sản phẩm hiện có trong giỏ hàng khi mỗi sản phẩm được xóa bỏ.

Với bài viết này thì chức năng Shopping cart vẫn thực sự chưa hoàn thiện. Hy vọng các bạn sẽ ứng dụng được vào website của mình. Các bạn có thể download mã nguồn của chương trình tại đây.