拖拽至购物车

此需求用到了四大功能点，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)
})