[翻译]
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方法被用于从数据库中读取数据。
{
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。
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 用来达到这样的功能。
{
var regularExpresssion = new RegExp(pattern);
if(id.match(regularExpresssion)) return true;
else return false;
}
拖拽克隆的元素
克隆一个被拖动的元素是很有必要的,这样可以得到想要的效果。
不使用克隆的效果:
使用克隆后的拖拽效果:
初始化拖动,并克隆的代码如下:
{
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"中,我使用了父元素的方法实现。不幸的是,这个方法并不是浏览器兼容的。于是产生了本文的方法,通过页面中的鼠标位置及拖放区域的位置来实现,从而实现了浏览器兼容。
看一下下图,它向你解释了如何获得拖放的区域。
{
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();
}
如果,产品不知放置区域,产品只是消失,否则,它被加到购物篮中。
[添加产品到购物篮]
{
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++;
}
[从购物篮中删除商品]
删除按钮,用来从购物篮中移出物品,并调整整个的价格。
{
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 函数,判断是否用户使用火狐浏览器,并执行不同的代码。
[总结]
本文介绍了如何创建一个可拖拽的对象,然后拖动他们到购物篮。