用HBuilder封装的HTML+css+js的网站不能拖动

分类：HBuilder

用html5+css+js做的一个页面，里面有个拖动，用的JS的onmousedown/onmousemove/onmouseup三个时间，在电脑上是没有问题的，当封装到安卓版的APP里后，担心的事情发生了，拖动没有任何反应，以为可能是支持的事件不同，把上述的三个事件换成touchstart/touchmove/touchend，还是没有效果，不晓得这个东西应该咋弄了，求高手指点一二，谢谢~

2015-03-11 22:29 负责人:无分享

7 个回复

DCloud_UNI_FXY

发一个测试工程看看

maidex (作者) - 学习

function Drag (obj)  
    {  
        obj.touchstart=function (ev)  
        {  
            var oEve=ev||event;  
            var oX=oEve.clientX-obj.offsetLeft;  
            var oY=oEve.clientY-obj.offsetTop;  

            if(obj.setCapture)  
            {  
                obj.touchmove=DragMove;  
                obj.touchend=DragUp;  
                obj.setCapture();  
            }  
            else  
            {  
                document.touchmove=DragMove;  
                document.touchend=DragUp;  
                return false;  
            }  

            function DragMove (ev)  
            {  
                var oE=ev||event;  

                var l=oE.clientX-oX;  

                var t=oE.clientY-oY;  

                if(l>0)  
                {  
                    l=0;  
                }  
                else if(l<-(obj.offsetWidth-document.documentElement.clientWidth))  
                {  
                    l=-(obj.offsetWidth-document.documentElement.clientWidth)+'px';  
                }  

                if(t>0)  
                {  
                    t=0;  
                }  
                else if(t<-(obj.offsetHeight-document.documentElement.clientHeight))  
                {  
                    t=-(obj.offsetHeight-document.documentElement.clientHeight)+'px';  
                }  

                obj.style.left=l+'px';  

                obj.style.top=t+'px';  

                document.title=t+'  '+obj.offsetHeight+'    

'+document.documentElement.clientHeight;  
            }  

            function DragUp ()  
            {  
                this.touchmove=null;  
                this.touchend=null;  

                if(obj.setCapture)  
                {  
                    obj.releaseCapture();  
                }  
            }  
        }  
    }  

    Drag(oMoveImg)

DCloud_UNI_FXY

给个能完整测试的demo

maidex (作者) - 学习

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<title>拖动</title>  
<style>  
#cmainsee{width:100%; overflow:hidden; position:relative;}  
#moveimg{ position:absolute; left:0; top:0;}  
</style>  
<script>  
window.onload=function ()  
{  
    var y=document.documentElement.clientHeight || document.body.clientHeight;  
    var okuang=document.getElementById('cmainsee');//框  
    var oMoveImg=document.getElementById('moveimg');//可移动部分  
    okuang.style.height=y+'px';  
    oMoveImg.onmousedown=function (ev)  
    {  
        function Drag (obj)  
        {  
            obj.touchstart=function (ev)  
            {  
                var oEve=ev||event;  
                var oX=oEve.clientX-obj.offsetLeft;  
                var oY=oEve.clientY-obj.offsetTop;  

                if(obj.setCapture)  
                {  
                    obj.touchmove=DragMove;  
                    obj.touchend=DragUp;  
                    obj.setCapture();  
                }  
                else  
                {  
                    document.touchmove=DragMove;  
                    document.touchend=DragUp;  
                    return false;  
                }  

                function DragMove (ev)  
                {  
                    var oE=ev||event;  

                    var l=oE.clientX-oX;  

                    var t=oE.clientY-oY;  

                    if(l>0)  
                    {  
                        l=0;  
                    }  
                    else if(l<-(obj.offsetWidth-document.documentElement.clientWidth))  
                    {  
                        l=-(obj.offsetWidth-document.documentElement.clientWidth)+'px';  
                    }  

                    if(t>0)  
                    {  
                        t=0;  
                    }  
                    else if(t<-(obj.offsetHeight-document.documentElement.clientHeight))  
                    {  
                        t=-(obj.offsetHeight-document.documentElement.clientHeight)+'px';  
                    }  

                    obj.style.left=l+'px';  

                    obj.style.top=t+'px';  

                    document.title=t+'  '+obj.offsetHeight+'  '+document.documentElement.clientHeight;  
                }  

                function DragUp ()  
                {  
                    this.touchmove=null;  
                    this.touchend=null;  

                    if(obj.setCapture)  
                    {  
                        obj.releaseCapture();  
                    }  
                }  
            }  
        }  

        Drag(oMoveImg);  
    }  

}  
</script>  
</head>  

<body>  
<div id="cmainsee">  
    <img src="/img/biaozhun.jpg" id="moveimg"/>  
</div>  

</body>  
</html>

DCloud_UNI_FXY

增加事件和移除事件，请换成下列形式。
addEventListener('touchstart',func);
removeEventListener('touchstart',func);

maidex (作者) - 学习

window.onload=function ()
{
var y=document.documentElement.clientHeight || document.body.clientHeight;
var okuang=document.getElementById('cmainsee');//框
var oMoveImg=document.getElementById('moveimg');//可移动部分
okuang.style.height=(y-20)+'px';

oMoveImg.addEventListener('mousedown',Drag,false);  

function Drag ()  
{  
    (function (ev){  

        function DragMove (ev)  
        {  
            var oE=event || ev;  
            var nl=oE.clientX-oX;  
            var nt=oE.clientY-oY;  
            if(nl>0)  
            {  
                nl=0;  
            }  
            else if(nl<-(oMoveImg.offsetWidth-document.documentElement.clientWidth))  
            {  
                nl=-(oMoveImg.offsetWidth-document.documentElement.clientWidth);  
            }  
            if(nt>0)  
            {  
                nt=0;  
            }  
            else if(nt<-(oMoveImg.offsetHeight-document.documentElement.clientHeight))  
            {  
                nt=-(oMoveImg.offsetHeight-document.documentElement.clientHeight);  
            }  
            oMoveImg.style.left=nl+'px';  
            oMoveImg.style.top=nt+'px';  

        }  

        var oEve=event||ev;  
        var oX=oEve.clientX-oMoveImg.offsetLeft;  
        var oY=oEve.clientY-oMoveImg.offsetTop;  

        document.addEventListener('mousemove',DragMove,false);  

    })();  
}

}

maidex (作者) - 学习

还是没有任何的效果

该问题目前已经被锁定, 无法添加新回复

用HBuilder封装的HTML+css+js的网站不能拖动

7 个回复

公告

相关问题

用HBuilder封装的HTML+css+js的网站不能拖动

与内容相关的链接

7 个回复

公告

相关问题