使用touch-punch.js实现移动端的拖放效果

一、下载文件并引入

下载地址：http://touchpunch.furf.com/

引入:

<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>

这里可以查看参数http://www.cnblogs.com/ganqiyin/archive/2013/12/12/3471622.html

二、使用

html部分:

<div class="big_img" id="big_img">
                <div class="big_img">
                    <img src="images/zz1_0.png" class="big_img_name" id="big_name">
                    <img src="images/game_list_0.png" id="big1" width="362" height="350">
                    <img src="images/start1.png" id="big2" width="217" height="210">
                </div>

 </div>

<div class="game_list">
                <div class="game_list_top">
                    <div>
                        <img src="images/game_list_1.png"  class="list_big" >
                        <img src="images/game_list_name1.png" class="game_list_name">
                    </div>
                    <div style="margin-left:145px;">
                        <img src="images/game_list_2.png"   class="list_big">
                        <img src="images/game_list_name2.png"  class="game_list_name">
                    </div>
                    <div style="margin-left:290px;">
                        <img src="images/game_list_3.png"   class="list_big">
                        <img src="images/game_list_name3.png"  class="game_list_name">
                    </div>
                    <div style="margin-left:435px;">
                        <img src="images/game_list_4.png"   class="list_big">
                        <img src="images/game_list_name4.png"  class="game_list_name">
                    </div>
                </div>
                <div class="game_list_bottom">
                    <div>
                        <img src="images/game_list_5.png"  class="list_small">
                        <img src="images/game_list_name5.png" class="game_list_name">
                    </div>
                    <div style="margin-left:145px;">
                        <img src="images/game_list_6.png" class="list_small">
                        <img src="images/game_list_name6.png"  class="game_list_name">
                    </div>
                    <div style="margin-left:290px;">
                        <img src="images/game_list_7.png" class="list_small">
                        <img src="images/game_list_name7.png"  class="game_list_name">
                    </div>
                    <div style="margin-left:435px;">
                        <img src="images/game_list_8.png" class="list_small">
                        <img src="images/game_list_name8.png"  class="game_list_name">
                    </div> 
                </div>                
            </div>

js部分：

<script type="text/javascript">
                var big_pic = null;
                var small_pic = null;
                var zongzi = null;  //粽子是否被拖放过
                var zongzirong = null;//粽子肉是否被拖放过
                var bag_index = false;
                var a;
                var b;
                $(‘.list_big‘).draggable({
                        opacity:0.5,
                        revert:true,                    
                        start:function(){ 
                            a = 1;
                            b = 0;
                            if(!bag_index){ 
                            }else{//包过之后再拖放
                                $("#big_name").attr("src","images/zz1_0.png");
                                $("#big1").attr("src","images/game_list_0.png");
                                $("#big2").attr("src","images/start1.png");
                                small_pic = "images/start1.png";
                                big_pic = "images/game_list_0.png";
                                bag_index = false;
                            }  
                            big_pic = $(this).attr("src");
                                                     
                        }
                    });
                $(".big_img").droppable({
                    drop:function(){
                        if( a == 1){
                                if(!bag_index){ 
                                    zongzi = 1;
                                    }else{
                                    zongzi = 0;
                                    }                        
                                $("#big1").attr("src",big_pic);                                 
                                bag();
                            }
                    }                
                });
            
            
                $(‘.list_small‘).draggable({
                            opacity:0.5,
                            revert:true,                    
                            start:function(){
                                a = 0;
                                b = 1;
                                if(!bag_index){
                                }else{//包过之后再拖放
                                    $("#big_name").attr("src","images/zz1_0.png");
                                    $("#big1").attr("src","images/game_list_0.png");
                                    $("#big2").attr("src","images/start1.png");
                                    small_pic = "images/start1.png";
                                    big_pic = "images/game_list_0.png";
                                    bag_index = false;
                                }  
                                small_pic = $(this).attr("src");   
                            }
                        });
                $("#big_img").droppable({
                            drop:function(){ 
                                if(b ==1){
                                        if(!bag_index){ 
                                        zongzirong = 1;
                                        }else{
                                        zongzirong = 0;
                                        } 
                                        $("#big2").attr("src",small_pic);
                                        bag();
                                    }                                
                            }                
                        });
            
            //判断之后包粽子
            function bag(){
                if((!!zongzi)&&(!!zongzirong)){ //当粽子和粽子肉都存在                
                    setTimeout(function(){                    
                            $("#big1").attr("src","img/"+big_pic);
                            $("#big2").attr("src","images/start1.png");
                            $("#big_name").attr("src","img/"+small_pic);
                            zongzi = 0;  //粽子是否被拖放过
                            zongzirong = 0;//粽子肉是否被拖放过
                            bag_index = true;
                        }, 1000);                      
                }
            }
        </script>

效果：

微信包粽子游戏