使用JavaScript拖拽玩具产品图标到购物车的源代码

remex著
有时候，我访问一些购物的网站，发现他们都可以拖拽喜欢的商品到购物篮中，我被这种功能深深地吸引，决定自己做一个这样的小程序。在这篇文章中，我将实现一个页面，它能够让用户拖拽准备购买的商品图标到购物篮中。

[翻译]
Azamsharp著Drag and Drop Products to the Shopping Basket Using JavaScript

使用JavaScript拖拽玩具产品图标到购物篮

[特点]
支持多种浏览器之间的兼容，包括火狐等等。

[简介]

有时候，我访问一些购物的网站，发现他们都可以拖拽喜欢的商品到购物篮中，我被这种功能深深地吸引，决定自己做一个这样的小程序。

在这篇文章中，我将实现一个页面，它能够让用户拖拽准备购买的商品图标到购物篮中。你可以把这样的功能用在你的网站中，如果你需要实现交易网站的话。：）

提示：在读这篇文章之前，强烈推荐您读取一些这个文章：Drag and Drop Using JavaScript.

[数据库设计]

我使用SQL SERVER 2005 Express 创建一个简单的数据库叫着ToyShopDatabase，这个数据库包含一个表tblToys，由4列组成：

ToyID: 主键
Title: 玩具标题
ImageUrl: 玩具链接
Price: 玩具的价格


[页面显示]

使用DataList 显示数据，BindData方法被用于从数据库中读取数据。

Code:

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();
}

显示后的图象如下：



[让图标可以拖拽]

我们都知道DIV是允许拖拽的对象，我们使用一个正则表达式过滤正确的DIV。

Code:

<script>
var dragElementPattern = ".+_a$";
var divElements = document.getElementsByTagName("div");

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

首先，得到页面上所有的DIV元素，使用正则表达式找到正确的那个，代码中的IsMatch 用来达到这样的功能。

Code:

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

拖拽克隆的元素

克隆一个被拖动的元素是很有必要的，这样可以得到想要的效果。

不使用克隆的效果：


使用克隆后的拖拽效果：


初始化拖动，并克隆的代码如下：

Code:

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;
}

[放置元素到可放置的区域]

我确实在这个问题上阻塞了不少时间。在我的文章"Drag and Drop Using JavaScript"中，我使用了父元素的方法实现。不幸的是，这个方法并不是浏览器兼容的。于是产生了本文的方法，通过页面中的鼠标位置及拖放区域的位置来实现，从而实现了浏览器兼容。

看一下下图，它向你解释了如何获得拖放的区域。

Code:

function Drop(e)
{
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;

    var dZone = document.getElementById("dZone");

    if( evt.clientX > dZone.offsetLeft &&
        evt.clientX < (dZone.offsetLeft + dZone.offsetWidth) &&
        evt.clientY > dZone.offsetTop &&
        evt.clientY < (dZone.offsetTop + dZone.offsetHeight))
    {
        AddPrice();
    }

    document.onmouseup = null;
    document.onmousemove = null;

    document.body.removeChild(clone);
    mouseState = 'up';
    ResetColor();
}

如果，产品不知放置区域，产品只是消失，否则，它被加到购物篮中。

[添加产品到购物篮]

Code:

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++;

}

[从购物篮中删除商品]

删除按钮，用来从购物篮中移出物品，并调整整个的价格。

Code:

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);
}

因为不同浏览器访问子节点的方法不同，所以，这里使用了一个IsFireFox 函数，判断是否用户使用火狐浏览器，并执行不同的代码。

[总结]

本文介绍了如何创建一个可拖拽的对象，然后拖动他们到购物篮。

源代码下载

原文：http://www.msproject.cn/article/DragDropPicture.aspx