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

转载 2007年10月16日 10:48:00

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

用java代码写一个简单的网上购物车程序

需求:1、写一个商品类,有商品编号、商品名称、商品分类、商品单价属性。2、写一个商品条目信息类,有商品和数量两个属性,有商品总价格方法。 3、写一个购物车类,有添加商品方法、查看订单信息,删除商品,...
  • ylyang12
  • ylyang12
  • 2016年10月30日 15:53
  • 10506

购物车的清空、删除、数量变化

表有汇PC端购物车清空、删除、修改功能实现 清空实际上就是将该用户的所有购物车数据的有效否改成false,从而不让商品显示出来;数量变化就是修改。 购物车页面: 对应的html代码: ...
  • gxyouzhizhe
  • gxyouzhizhe
  • 2015年06月24日 15:11
  • 4456

使用cookie实现购物车

下面的代码将商品添加到cookie中,这里就不再编写添加商品到购物车的页面流程,而是直接使用代码实现 HttpCookie cookie = new HttpCookie("shop"); ...
  • mynewdays
  • mynewdays
  • 2013年11月20日 10:18
  • 16618

flex3一个简单购物车拖拽的例子

  • 2008年10月23日 10:14
  • 1.3MB
  • 下载

用html5实现的购物车拖拽特效

这里面还集成计算总价,个人感觉蛮好的。         HTML 5 Drag and Drop Shopping Cart     ul, li{ list-style: none;...
  • asdfzjs
  • asdfzjs
  • 2013年09月15日 15:41
  • 885

Jquey购物车拖拽效果

  • 2011年12月22日 17:09
  • 81KB
  • 下载

组件拖拽,购物车效果

  • 2015年09月29日 16:57
  • 1.2MB
  • 下载

js拖拽购物车

  • 2016年10月12日 10:50
  • 129KB
  • 下载

拖拽购物车

  • 2012年08月05日 20:44
  • 6KB
  • 下载

1模拟网易邮箱实现全选,全不的功能(服务端和客户端) 2 使用DataList实现 加入购物车,编辑,删除,更新,取消功能。要求连一个产品表。

1模拟网易邮箱实现全选,全不的功能(服务端和客户端) http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www....
  • qihongxia1
  • qihongxia1
  • 2012年12月18日 20:55
  • 324
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用JavaScript拖拽玩具产品图标到购物车的源代码
举报原因:
原因补充:

(最多只允许输入30个字)