一、下载文件并引入
下载地址：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>
效果：
微信包粽子游戏
文章转自：http://blog.csdn.net/u012011360/article/details/45743039
