jQuery拖动商品放入购物车代码.zip资源-CSDN文库

共5个文件

jpg：3个

js：1个

html：1个

版权申诉

jquery

jquery代码

jquery插件

jquery特效

45 浏览量 2023-09-21 00:21:51 上传评论收藏 50KB ZIP 举报

jQuery是一款广泛应用于网页交互开发的JavaScript库，以其简洁的API和强大的功能著称。在这个"jQuery拖动商品放入购物车代码.zip"压缩包中，我们可以找到一个实现商品拖放功能到购物车的示例。这个功能在电商网站上非常常见，能够提供用户友好的体验，让用户能够轻松地将感兴趣的商品添加到购物车。 `index.html`是网页的主体文件，它包含了HTML结构，定义了页面布局和元素。在这个例子中，商品的图片和信息可能会被封装在可拖动的div元素中，而购物车则是一个接收这些商品的目标区域。HTML元素通常会通过`class`或`id`属性来标识，以便于jQuery选择器定位和操作。接下来，`js`文件夹内可能包含了一个或多个JavaScript文件，这些文件包含了实现拖放功能的jQuery代码。jQuery提供了`draggable()`和`droppable()`方法，分别用于创建可拖动元素和可放置目标。通过这些方法，开发者可以定义拖放行为，如拖动开始、拖动中、拖放到目标区域时以及拖放结束时的回调函数。例如： ```javascript $(".draggable").draggable({ cursor: "move", start: function() { /* 拖动开始时的处理 */ }, drag: function() { /* 拖动中时的处理 */ }, stop: function() { /* 拖动结束时的处理 */ } }); $(".droppable").droppable({ accept: ".draggable", // 只接受类名为'draggable'的元素 drop: function(event, ui) { /* 商品放入购物车时的处理 */ } }); ``` 在`drop`事件的回调函数中，通常会进行一些业务逻辑，比如更新商品数量、显示购物车状态或者发送Ajax请求更新服务器上的购物车数据。 `img`文件夹中可能包含了一些与示例相关的图像资源，比如商品图片或者购物车图标。这些图片可以被引用到`index.html`中的`<img>`标签，增强页面的视觉效果。这个压缩包提供了一个基础的jQuery拖放购物车实现，适合初学者学习和开发者参考。通过阅读和理解代码，你可以了解到如何利用jQuery来实现交互式的网页功能，这对于提升网站用户体验非常有帮助。如果你对JavaScript和jQuery有一定了解，还可以尝试对代码进行二次修改，比如增加动画效果、优化性能或者适应更复杂的需求。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery拖动商品放入购物车代码.zip （5个子文件）

jquery-1.9.1.min.js 90KB

img

car2.jpg 7KB

car3.jpg 5KB

car1.jpg 6KB

index.html 4KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery拖动商品放入购物车代码</title> <script src="js/jquery-1.9.1.min.js"></script> <style> *{padding:0px;margin:0px} table,thead{width: 100%;} tr th{width:25%;height:30px;background-color: #23B7E5;font-size: 16px;padding: 2px 0px;color:#fff;} tr td{text-align: center;padding: 5px 0px;background-color: #fff;font-size: 14px;} tr td a{padding: 2px 5px;border:1px solid #ddd;cursor: pointer;} ul li{list-style-type: none;overflow: hidden;} #div1{width:350px;height:100%;border:1px solid #ddd;position:fixed;right:0px;top:0px; background-color: #F5F5F5; } #div1 ul li p{50%;text-align: right;flex: 1;} #div2 ul{overflow: hidden;} #div2 ul li{float: left;width:150px;height:120px;border:1px solid #ddd;margin-right: 10px;} #div2 ul li img{width: 100%;height: 100%;} .div_panel{min-height: 200px;} .allMoney{position: absolute;right: 0px;} </style> </head> <body><script src="/demos/googlegg.js"></script> 拖拽到右侧 <div id="div2"> <ul> <li> <img id="img1" src="img/car1.jpg" draggable="true" ondragstart="drag(this)" /> <input type="hidden" id="inp_money" value="23"> <input type="hidden" id="inp_name" value="耐克3.0" /> </li> <li> <img id="img1" src="img/car2.jpg" draggable="true" ondragstart="drag(this)" /> <input type="hidden" id="inp_money" value="100"> <input type="hidden" id="inp_name" value="奥迪" /> </li> <li> <img id="img1" src="img/car3.jpg" draggable="true" ondragstart="drag(this)" /> <input type="hidden" id="inp_money" value="1000"> <input type="hidden" id="inp_name" value="东风特产" /> </li> </ul> </div> <div id="div1" ondrop="drop()" ondragover="allowDrop(event)"> <div class="div_panel"> <table border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>价格</th> </tr> </thead> <tbody id="ul_panel"></tbody> </table> </div> <p class="allMoney">总价:<span id="totalMoney">0</span></p> </div> <script> var money=0; var name=""; var data=[]; function allowDrop(e){ e.preventDefault(); } function drag(t){ money=$(t).siblings("#inp_money").val(); name=$(t).siblings("#inp_name").val(); /*var num=1; add(name,money,num);*/ } function addJson(name,money){ for(var j=0;j<data.length;j++){ if(data[j].name==name){ data[j].num++; return; } } data.push({ money:money, name:name, num:1 }); } function addHtml(){ var text_html=''; var totalMoney=0; $("#ul_panel").html(""); for(var i=0;i<data.length;i++){ text_html+='<tr><td>'+data[i].name+'</td><td>'+data[i].money+'</td><td><a onclick="reduce(\'\'+'+i+',this)">-</a> '+data[i].num+' '; text_html+='<a onclick="addNum(\'\'+'+i+',this)">+</a></td><td>￥'+(data[i].money*data[i].num)+'</td></tr>'; totalMoney+=data[i].money*data[i].num; $("#totalMoney").text(totalMoney); } $("#ul_panel").append(text_html); } function drop(){ addJson(name,money); addHtml(); } function reduce(a,t){ data[a].num--; if(data[a].num==0){ data.splice(a,1); } if(data.length==0){ $("#totalMoney").text(0); } addHtml(); } function addNum(a,t){ data[a].num++; addHtml(); } </script> <div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉