JQuery UI 关于拖拉商品到购物车构思的简单实现
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>