JQuery UI 关于拖拉商品到购物车构思的简单实现

来源：互联网发布：我国纺织品出口数据编辑：程序博客网时间：2024/05/17 22:02

JQuery UI实质上可以看作一组插件，可在http://jqueryui.com/ 下载。

本次案列实现拖动商品到购物车的功能。涉及拖拽(drag and dropping) 的ui事件。代码如下：

<!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>

截图如下：

1、选择货品为p_008

选择商品

2、拖拉商品到购物车

拖拉商品到购物车

其实实现起来难度不大，主要是学习ui插件用。