使用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

js拖拽购物车

案例如下 使用拖放API将商品拖入购物车 body { font-size:12px } .liT{ border-bottom:solid 1px #ccc; background-c...
  • sinat_25926481
  • sinat_25926481
  • 2016-10-12 10:53:09
  • 993

【强烈推荐】如何实现商品拖拽到购物车(源代码)

  • 2011年09月29日 10:41
  • 119KB
  • 下载

一个购物车的实现源代码

BuyItem.java: package com.itcast.bean.product;public class BuyItem { //注意这里的product里只能有一个style(即产品的颜...
  • gaoge19861207
  • gaoge19861207
  • 2009-10-20 00:09:00
  • 1993

android可拖动的购物车效果(含点击放入购物车动画代码)

由于项目需要,做了一个可以移动的购物车控件,已经点击添加到购物车的动画效果.动画效果在列表中也是可以使用的 一.可以拖动的购物车 1.主要是通过WindowManager添加和删除自定义的LiearL...
  • qq94035441
  • qq94035441
  • 2016-01-06 16:52:24
  • 1027

iClient for Javascript拖拽绘制图标

作者:柳惠珠 引言    在现在的动态标绘中,只能点击要绘制的标号然后绘制到地图上,可是有些小伙伴却想要拖拽绘制到地图上。现在我们就来说说拖拽绘制标号该如何实现吧~     在这里我们仅以标号库...
  • supermapsupport
  • supermapsupport
  • 2017-04-01 16:13:23
  • 775

拖拽之实例购物车

购物车 *{margin: 0;padding: 0px;} li{list-style: none;} li{wid...
  • Aloe_904
  • Aloe_904
  • 2017-11-07 15:12:10
  • 148

javascript实现简易购物车(高手勿喷)

  • 2012年04月21日 20:10
  • 2KB
  • 下载

css购物车样式

css购物车样式
  • pingdouble
  • pingdouble
  • 2015-10-22 16:55:51
  • 2318

很强大的JS实现的购物车源码

  • 2014年07月25日 11:10
  • 150KB
  • 下载

HTML5拖放事件与购物车案例

l拖放事件 •draggable : –设置为true,元素就可以拖拽了 •拖拽元素事件 : 事件对象为被拖拽元素 –dragstart ,拖拽前触发 –drag ,拖拽前、拖拽结束之间,...
  • sweetllh
  • sweetllh
  • 2017-07-29 14:54:27
  • 271
收藏助手
不良信息举报
您举报文章:使用JavaScript拖拽玩具产品图标到购物车的源代码
举报原因:
原因补充:

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