JQuery UI 关于拖拉商品到购物车构思的简单实现
2009-09-01 10:30
495 查看
JQuery UI实质上可以看作一组插件,可在http://jqueryui.com/ 下载。
本次案列实现拖动商品到购物车的功能。涉及 拖拽(drag and dropping) 的ui事件。代码如下:
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
.block
{
border:solid 1px red;
}
.drop
{
border:solid 1px green;
}
.droppable-active
{
border-style:dotted;
border-width:1px;
border-color:Blue;
}
.droppable-hover
{
border-style:solid;
border-width:2px;
border-color:Aqua;
border-bottom:solid 4px red;
}
.mouseover
{
border-width:3px;
}
</style>
<script type="text/javascript">
$(function() {
$("img.block").each(function(i) {
$(this).attr("alt", $(this).attr("id"));
});
var divDrap = null;
$("img.block").draggable({
helper: 'clone',
distance: 10,
start: function(ev, ui) { divDrap = this; },
stop: function(ev, ui) { divDrap = null; }
});
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
if (divDrap != null) {
alert("你所选择的商品是:" + $(divDrap).attr("id"));
}
}
});
$("img.block").mouseenter(function() {
$(this).attr("width", $(this).attr("width") + 10);
$(this).addClass("mouseover");
}).mouseleave(function() {
$(this).attr("width", $(this).attr("width") - 10);
$(this).removeClass("mouseover");
});
});
</script>
</head>
<body>
<table >
<tr>
<td colspan="4">
<img src="http://static.paipaiimg.com/assets/auction/addcart.png" class="drop" alt="拖动到购物车" />
</td>
</tr>
<tr>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_001" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_002" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_003" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_004" />
</td>
</tr>
<tr>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_005" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_006" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_007" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_008" />
</td>
</tr>
<tr>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_009" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_0010" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_0011" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_0012" />
</td>
</tr>
</table>
</body>
</html>
本次案列实现拖动商品到购物车的功能。涉及 拖拽(drag and dropping) 的ui事件。代码如下:
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
.block
{
border:solid 1px red;
}
.drop
{
border:solid 1px green;
}
.droppable-active
{
border-style:dotted;
border-width:1px;
border-color:Blue;
}
.droppable-hover
{
border-style:solid;
border-width:2px;
border-color:Aqua;
border-bottom:solid 4px red;
}
.mouseover
{
border-width:3px;
}
</style>
<script type="text/javascript">
$(function() {
$("img.block").each(function(i) {
$(this).attr("alt", $(this).attr("id"));
});
var divDrap = null;
$("img.block").draggable({
helper: 'clone',
distance: 10,
start: function(ev, ui) { divDrap = this; },
stop: function(ev, ui) { divDrap = null; }
});
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
if (divDrap != null) {
alert("你所选择的商品是:" + $(divDrap).attr("id"));
}
}
});
$("img.block").mouseenter(function() {
$(this).attr("width", $(this).attr("width") + 10);
$(this).addClass("mouseover");
}).mouseleave(function() {
$(this).attr("width", $(this).attr("width") - 10);
$(this).removeClass("mouseover");
});
});
</script>
</head>
<body>
<table >
<tr>
<td colspan="4">
<img src="http://static.paipaiimg.com/assets/auction/addcart.png" class="drop" alt="拖动到购物车" />
</td>
</tr>
<tr>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_001" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_002" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_003" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_004" />
</td>
</tr>
<tr>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_005" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_006" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_007" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_008" />
</td>
</tr>
<tr>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_009" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_0010" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_0011" />
</td>
<td>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1K_ddXjiiHdL.zGrb_123056.jpg_sum.jpg" class="block" alt="" id="p_0012" />
</td>
</tr>
</table>
</body>
</html>
相关文章推荐
- JQuery UI 关于拖拉商品到购物车构思的简单实现
- 用jsp实现一个简单的购物车web应用系统。实现的添加购物商品,删除购物商品并且显示购物车信息。
- 简单实现拖动商品,加入购物车并总计商品的功能
- vue2实现简单的商品加入购物车和结算功能(前端数据保存方向)
- JavaWeb基础+oracle实现简单简单分页商品浏览与加入购物车系统
- 关于原生js中bind函数的简单实现
- 关于QQ空间相册功能的构想与简单实现
- Angularjs实现简单的购物车
- 关于Session缓存简单原理和实现
- PHP简单实现购物车
- 关于Excel操作编写的一个软件设计构思案例[连载] --如何实现从字符串中提取需要的字符并赋值给指定单元格内
- jquery 简单实现购物车 cookie与json操作
- 关于数据简单分页的实现
- 关于“多线程断点续传下载”功能的一个简单实现和讲解
- JSP(6)简单购物车实现
- asp.net通过cookie简单实现购物车功能
- 关于STL中vector的内存管理与简单代码实现
- 关于java通信的一个简单聊天系统的实现
- angular.js框架简单实现加载无限加载商品
- JAVAEE中用session实现简单的购物车