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

今天药忘吃喽~ 2022-08-08 11:49 208阅读 0赞

一、下载文件并引入

下载地址：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][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>

效果：

微信包粽子游戏

![20150515123320370][]

[http_www.cnblogs.com_ganqiyin_archive_2013_12_12_3471622.html]: http://www.cnblogs.com/ganqiyin/archive/2013/12/12/3471622.html
[20150515123320370]: /images/20220805/aaf915b973e84a20aeb079c3c7053621.png

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 wxWidgets 实现拖放操作

使用 wxWidgets 实现拖放操作 wxWidgets 是一个开源的 C++ 跨平台 GUI 库，它可以支持 Windows、Linux 和 macOS 等常见操作系统。

左手的ㄟ右手/ 2024年03月24日 16:21/ 0 赞/ 54 阅读

相关 html 手机端拖拽效果,JS实现移动端触屏拖拽功能

1.html 2.css \ \{ margin: 0; padding: 0; \} html, body \{ width: 100%; height:

谁借莪１个温暖的怀抱￠/ 2022年10月06日 11:49/ 0 赞/ 385 阅读

相关移动端适配不同设备(缩放效果)

// 非360基线显示适配 if (/Android (\d+\.\d+)/.test(navigator.userAgent)) { var

雨点打透心脏的1/2处/ 2022年08月09日 17:50/ 0 赞/ 232 阅读

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

一、下载文件并引入下载地址：http://touchpunch.furf.com/ 引入: <script src="js/jquery-ui.min.js"></sc

今天药忘吃喽~/ 2022年08月08日 11:49/ 0 赞/ 209 阅读

相关 hammer.js实现移动端的拖放效果

hammer.js可以实现移动端的多种触摸效果。详细可以点击[http://www.cnblogs.com/iamlilinfeng/p/4239957.html][http_

川长思鸟来/ 2022年08月08日 06:55/ 0 赞/ 247 阅读

相关拖放 API 实现拖放排序

前言 HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素

以你之姓@/ 2022年06月16日 01:27/ 0 赞/ 277 阅读

相关 JavaScript拖放实现

拖放概念：点击某个对象，并按住鼠标按钮不放，将鼠标移动到另一个区域，然后释放鼠标按钮将对象放在这里。 > 基本思路： > 创建一个绝对定位的元素，使其可以用鼠标移动。

你的名字/ 2022年05月29日 14:09/ 0 赞/ 267 阅读

相关 HTML5 如何实现拖放'N'拖放

在网络开发人员需要掌握的所有技术中，看起来最容易造成混淆和潜在问题的是拖拽。这不是一项新技术，它已存在多年，但许多开发人员仍然执着于基于jQuery的旧方法，以牵连复杂（有

Myth丶恋晨/ 2022年05月20日 02:41/ 0 赞/ 292 阅读

相关 pc端移动端拖拽实现

div1 { width: 100px; height: 100px; background: red; positio

曾经终败给现在/ 2021年12月21日 23:47/ 0 赞/ 494 阅读

相关 react移动端svg等图片拖拽缩放

![react移动端图片缩放拖拽][react] 使用es6类的方法实现 / 定义svg，png，jpeg图片移

谁借莪１个温暖的怀抱￠/ 2021年09月08日 15:24/ 0 赞/ 633 阅读