HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1619|回复: 0

[笔记] 拖动位置移动兼容移动端

[复制链接]
  • TA的每日心情
    奋斗
    2016-4-10 20:41
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2016-2-20 08:28:39 | 显示全部楼层 |阅读模式
    QQ图片20160220082818.png
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <style type="text/css">
        body,html{
            margin: 0;
            padding: 0;
            position: relative;
            height: 100%;
            width: 100%;
        }
            .drag{
                border:1px solid red;
                bottom:0;
                left: 0;
                height: 300px;
                margin: auto;
                position: absolute;
                right: 0;
                top: 0;
                width: 600px;
            }
            .drag_list{
                background: #00625A;
                color: #fff;
                height: 50px;
                line-height: 50px;
                float: left;
                margin: 1px 0;
                text-align: center;
                padding: 5px 0;
                position: relative;
                width: 100%;
            }
        </style>
        <body>
            <div class="drag">
                <div class="drag_list">0</div>
                <div class="drag_list">1</div>
                <div class="drag_list">2</div>
                <div class="drag_list">3</div>
            </div>
            <script>
                    var ind,nowind;
                    var moveflag   = false;
                    var ex         = $(".drag").offset().left;
                    var ey         = $(".drag").offset().top;
                    var draghei    = $(".drag").height();
                    var dragwid    = $(".drag").width();
                    var listhei    = $(".drag .drag_list").height()+parseInt($(".drag .drag_list").css("margin-top"))+parseInt($(".drag .drag_list").css("margin-bottom"))+parseInt($(".drag .drag_list").css("padding-top"))+parseInt($(".drag .drag_list").css("padding-bottom"));
                    var draglistlen= $(".drag .drag_list").length;
                   
                    //移动端监听
                    var phoneind=0,phonenowind=0;
                    function touchStart(event) {
                        //阻止网页默认动作(即网页滚动)
                       event.preventDefault();
                       var ex         = $(".drag").offset().left;
                
                         var touch = event.touches[0]; //获取第一个触点
                        var x = Number(touch.pageX); //页面触点X坐标
                        var y = Number(touch.pageY); //页面触点Y坐标
                        //记录触点初始位置
                        startX = x;
                        startY = y;
                        phoneind=parseInt((y-ey)/listhei);
                        var scrollfathter1=document.getElementsByClassName("drag")[0].getElementsByClassName("drag_list")[phoneind];
                        scrollfathter1.addEventListener("touchstart", touchStart, false);
                        scrollfathter1.addEventListener("touchmove", touchMove, false);
                        scrollfathter1.addEventListener("touchend", touchEnd, false);
                        moveflag=true;
                    }
                    function touchMove(event) {
                        event.preventDefault();
                         var touch = event.touches[0]; //获取第一个触点
                         var x = Number(touch.pageX); //页面触点X坐标
                         var y = Number(touch.pageY); //页面触点Y坐标
                         if(moveflag)
                         {
                             phonenowind= parseInt((y-ey)/listhei);//移动到最后的位置的索引
                         }
                    }
                    function touchEnd(event) {
                        event.preventDefault();
                        var html="";
                            html+="<div class=\"drag_list\">"+$(".drag .drag_list").eq(phoneind).html()+"</div>";
                            $(".drag .drag_list").eq(phoneind).remove();
                              if(phoneind<=phonenowind)
                            {
                                //向下移动
                                console.log("向下移动")
                                $(".drag .drag_list").eq(phonenowind-1).after(html)
                            }
                            else
                            {
                                //向上移动
                                console.log("向上移动")
                                $(".drag .drag_list").eq(phonenowind).before(html)
                            }
                            moveflag=false;
                    }

                $(function(){
                    if((navigator.userAgent.match(/(iPhone|Android|iPad)/i)))
                    {
                        var scrollfathter1=document.getElementsByClassName("drag")[0];
                        scrollfathter1.addEventListener("touchstart", touchStart, false);
                        
                    }
                    else
                    {
                        $(document).on("mousedown",".drag .drag_list",function(e){
                            e.preventDefault();
                            ind     =parseInt($(this).index())//当前的索引
                            moveflag=true;
                        })
                        $(document).on("mousemove",".drag .drag_list",function(e){
                                e.preventDefault();
                                if(moveflag)
                                {
                                    var mex   = e.pageX;
                                    var mey   = e.pageY;
                                        nowind= parseInt((mey-ey)/listhei);//移动到最后的位置的索引
                                        $(".drag .drag_list").eq(ind).attr("pink",nowind);      
                                }
                            })
                        $(document).on("mouseup",".drag .drag_list",function(e){
                            e.preventDefault();
                            var html="";
                                html+="<div class=\"drag_list\">"+$(".drag .drag_list").eq(ind).html()+"</div>";
                                $(".drag .drag_list").eq(ind).remove();
                                  if(ind<=nowind)
                                {
                                    //向下移动
                                    console.log("向下移动")
                                    $(".drag .drag_list").eq(nowind-1).after(html)
                                }
                                else
                                {
                                    //向上移动
                                    console.log("向上移动")
                                    $(".drag .drag_list").eq(nowind).before(html)
                                }
                            
                            moveflag=false;
                        })
                    }
                })
            </script>
        </body>
    </html>


    HTML5中国微信

    小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

    GMT+8, 2017-2-23 11:04

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表