使用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>

效果：

微信包粽子游戏