移动端拖拽的实现效果

最新推荐文章于 2023-11-25 00:09:04 发布

xyphf_和派孔明

最新推荐文章于 2023-11-25 00:09:04 发布

阅读量6.6k

点赞数

分类专栏： DOM&BOM操作 Java全栈之路文章标签：移动拖拽

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/51988947

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章

订阅专栏

Java全栈之路

55 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
*{margin:0;padding:0;list-style:none;}
body{position:absolute;background:#ccc;}
.div2{position:relative;width:1.172058134083451rem;height:50px;background:#fff;}
</style>
<script type="text/javascript" charset="utf-8" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> 
<script>
    (function($) {
        $.fn.extend({
            AutoSize: function() {
                var element = $(this);
                auto();
                function auto() {
                    var width = $(window).width(),
                        height = $(window).height();
                    $("html").css("font-size", width / 15);
                    $(element).width(width).height(height);
                };
                $(window).resize(auto);
            }
        });
    })(jQuery);
</script>

<script>
    $(function(){
        $("body").AutoSize();
    })
</script>

<script>
$(function(){ 
    var isdrag=false;   
    var NowLeft,disX;
    var NowTop,disY; 

    var oDiv2 = document.getElementById("div2");

    oDiv2.addEventListener('touchstart',thismousedown);  
    oDiv2.addEventListener('touchend',thismouseup);  
    oDiv2.addEventListener('touchmove',thismousemove);  

    function thismousedown(e){   
       isdrag = true;   
       NowLeft = parseInt(oDiv2.style.left+0);  
       NowTop = parseInt(oDiv2.style.top+0);   
       disX = e.touches[0].pageX;   
       disY = e.touches[0].pageY;
       return false;
    }

    function thismousemove(e){   
      if (isdrag){

       oDiv2.style.left = NowLeft + e.touches[0].pageX - disX + 'px'; 
       oDiv2.style.top = NowTop + e.touches[0].pageY - disY + 'px';

       return false;   
       }   
    }   

    function thismouseup(){  
        isdrag = false;  
    };
}); 
</script>
</head>
<body>
        <div id="div2" class="div2"></div>
</body>
</html>