拖拽至购物车
此需求用到了四大功能点,1.重构alert,confirm;2.拖拽功能;3.读取静态json;4.ajax提交产品信息;
此需求要求安装在客户方互动茶几终端上,要求尽量方便,无需配置相关语言环境,纯静态化;
alert,confirm,在之前的文章中有详细描述,这边就不再写了。
演示地址:http://120.26.59.104/text/list.html
此项目是展示在大屏本地上,外网访问首次加载可能会慢
1.拖拽使用了jquery插件模式
(function($) { var old = $.fn.drag; function Drag(element, options) { this.ver = '1.0'; this.$element = $(element); this.options = $.extend({}, $.fn.drag.defaults, options); this.init(); } Drag.prototype = { constructor: Drag, init: function() { var options = this.options; this.$element.on('touchstart.drag.founder mousedown.drag.founder', function(e) { var ev = e.type == 'touchstart' ? e.originalEvent.touches[0] : e, startPos = $(this).position(), disX = ev.pageX - startPos.left, disY = ev.pageY - startPos.top, that = this; //记录初始位置,以便复位使用 $(this).data('startPos', startPos); if (options.before && $.isFunction(options.before)) { options.before.call(that, ev); } $(document).on('touchmove.drag.founder mousemove.drag.founder', function(e) { var ev = e.type == 'touchmove' ? e.originalEvent.touches[0] : e, $this = $(that), $parent = $this.offsetParent(), $parent=$parent.is(':root')?$(window):$parent, pPos = $parent.offset(), pPos=pPos?pPos:{left:0,top:0}, left = ev.pageX - disX - pPos.left, top = ev.pageY - disY - pPos.top, r = $parent.width() - $this.outerWidth(true), d = $parent.height() - $this.outerHeight(true); left = left < 0 ? 0 : left > r ? r : left; top = top < 0 ? 0 : top > d ? d : top; $(that).css({ left: left + 'px', top: top + 'px' }); if (options.process && $.isFunction(options.process)) { options.process.call(that, ev); } e.preventDefault(); }); $(document).on('touchend.drag.founder mouseup.drag.founder', function(e) { var ev = e.type == 'touchend' ? e.originalEvent.changedTouches[0] : e; if (options.end && $.isFunction(options.end)) { options.end.call(that, ev); } $(document).off('.drag.founder'); }); e.preventDefault(); }); } }; //jQ插件模式 $.fn.drag = function(options) { return this.each(function() { var $this = $(this), instance = $this.data('drag'); if (!instance) { instance = new Drag(this, options); $this.data('drag', instance); } else { instance.init(); } if (typeof options === 'string') { //instance.options[options].call(this); } }); }; $.fn.drag.defaults = { before: $.noop, process: $.noop, end: $.noop }; $.fn.drag.noConflict = function() { $.fn.drag = old; return this; }; })(jQuery);
拖拽进购物车区域调用插件
//拖拽添加至购物车 var $tar = $(".menuWap").find("li img"); var $cont = $(".gwc span"); var num;//购物车数值 var orLeft,orTop,lLeft,lTop; var area = [1200,130];//购物车区域 var prudctIdArr = []//添加至购物车ID $tar.drag({ before: function(e) { num = parseInt($cont.html()); orLeft = parseInt($(this).position().left); orTop = parseInt($(this).position().top); $(this).css({"position":"absolute","left":orLeft+"px","top":orTop+"px","opacity":"0.8","z-index":"1000","border":"1px dashed #fff"}); $("body").append('<div class="addText">添加至右上角购物车</div>'); $(".addText").css({"left":orLeft+90+"px","top":orTop+10+"px"}) }, process: function(e) { lLeft = $(this).position().left; lTop = $(this).position().top; $(".addText").css({"left":lLeft+90+"px","top":lTop+10+"px"}) }, end: function(e) { function addFalse(e){ e.animate({"opacity":"0","left":orLeft+"px","top":orTop+"px","z-index":"0","border":"none"},200); } if(lLeft>area[0]&&lTop<area[1]){ if($(this).attr("data-isdo")==1){ alert("已经添加过该产品") addFalse($(this)); }else{ $(this).attr("data-isdo","1"); $cont.html(num+1) alert("添加成功") $(this).css({"opacity":"0","left":orLeft+"px","top":orTop+"px","z-index":"0","border":"none"}); var currentId = parseInt($(this).attr("data-id")); prudctIdArr.push(currentId); console.log(prudctIdArr) } }else{ addFalse($(this)) }; $(".addText").remove(); } });
静态调用json展示产品列表
var html; //购物列表展示 function shoplistShow(){ var serial = 0; var myDate = new Date(); var time = myDate.getFullYear()+"-"+myDate.getMonth()+"-"+myDate.getDate() for(i=0;i<product.length;i++){ for(a=0;a<4;a++){ var matchId = prudctIdArr[a]; if(matchId==product[i].id){ serial = serial+1; html = '<tr data-id='+product[i].id+'><td class="td" width="60"><span class="num">'+serial+'</span></td><td width=200>'+product[i].img+'</td><td><p class="tit top5">'+product[i].title+'</p><p class="top20">投资周期:'+product[i].cycle+'<span class="left120">加入购物车时间:'+time+'</span></p><p class="top5">投资领域:'+product[i].area+'</p><p class="top5">简介:'+product[i].inf+'</p></td><td style="text-align:right"><span class="btns btns-purple btns-spe btns-dele">删除</span></td></tr>'; $(".shopList table").append(html); } } } } //点击购物车 var isShowList = true; $(".gwc").click(function(){ if(prudctIdArr.length>0){ if(isShowList){ $("#backIco").attr("href","") isShowList = false; $(".menuWap").hide(); $("body,html").css({"background":"none"}); $(".shopList").show(); shoplistShow(); } }else{ //$(".menuWap").hide(); //$("body,html").css({"background":"none"}); //$(".shopList").show().append('<p style="text-align:center; font-size:40px; margin-top:200px">您还没添加购物车</p><p class="center top50"><a href="" class=" btns btns-red btns-spe2">返回</a></p>'); alert("请拖动产品至购物车区域!") } });
删除,清空产品
//删除产品 $(document).on("click",".btns-dele",function(){ if($cont.html()==1){ window.confirm("您只剩下最后一个产品,确定清空吗",function(){ window.location.href=""; }) return; }; $cont.html(parseInt($cont.html()-1)); $(this).parents("tr").remove(); var matchId = parseInt($(this).parents("tr").attr("data-id")); for(i=0;i<4;i++){ if(prudctIdArr[i] == matchId){ prudctIdArr.splice(i,1) } } console.log(prudctIdArr) }); //弹出填写信息 $(document).on("click","#btns-spe2",function(){ modal.modal($("#message"),$(".close")) }); //清空 $(document).on("click","#btns-clear",function(){ window.confirm("确定清空吗",function(){ window.location.href=""; }) });
ajax提交,(客户填写的手机号码,身份证号码以及从客户拖拽带过来的产品ID数组),地址是开发本地地址,局域网外无法使用
//提交信息 $(document).on("click","#confirmMes",function(){ var regPhone = /^1[3|5|8]\d{9}$/; var regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; var googsIds = prudctIdArr, idNo = $("#idNo").val(), phone = $("#phone").val(); if(phone==""||!regPhone.test(phone)){ $(".error").html("电话为空或格式不正确") }else if(idNo==""||!regId.test(idNo)){ $(".error").html("身份证为空或格式不正确") }else{ $(".error").html(""); $.ajax({ type: 'GET', url: 'http://192.168.6.81:8082/bespeak/order/addOrder', dataType: 'jsonp', jsonp:"jsonpcallback", data:"googsIds="+googsIds+"&idNo="+idNo+"&phone="+phone+"", timeout: 10000, error: function(data){ alert("系统错误"); setTimeout(function(){ modal.hide($(".modal-wapper")) },2000) }, success: function(json) { if(json.result=="1"){ alert("您的订单已成功提交") }else{ alert("提交失败") }; setTimeout(function(){ modal.hide($(".modal-wapper")) },2000); } }); } console.log(prudctIdArr) })
追求原创特效