怎么写js让用户拖动窗口

Question

我页里就一个div.这div的内容是后台动态生成的,内容70%可能会超出窗口的大小,从而出现滚动条.
现在想让客户点div中空白的地方拖动的话.能代替拖动滚动条.直接滚动.就像平板中内容大过窗口尺寸时的拖动效果那样.不是要改变这div的位置.而是改变当前浏览器视图内容的位置
请教各位了

Answer 1

    var scroll = false,oldx,oldy;
    div.onmousedown = function(ev){
        ev = ev || window.event;
        oldx = ev.clientX;
        oldy = ev.clientY;
        scroll = true;
    }
    div.onmouseup = function(){
        scroll = false;
    }
    div.onselectstart = function(){
        return false;
    }
    div.onmouseout = function(ev){
        ev = ev || window.event;
        var to = ev.relatedTarget || ev.toElement;
        if(!isParent(to,this)) scroll = false;
    }
    function isParent(c,p){
        var par = c.parentNode,is=false;
        while(par && par!=document.body){
            par = par.parentNode;
            if(par==p){
                is=true;
                return is;
            }
        }
        return is;
    }
    div.onmousemove = function(ev){
        if(scroll){
            ev = ev || window.event;
            var newx = ev.clientX,newy = ev.clientY;
            this.scrollTop += (newy - oldy);
            this.scrollLeft += (newx - oldx);
            oldx = newx,oldy=newy;
        }
    }<div id="div" style="height:60px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;">
    <div>
        <ul>
            <li>1111111111111<li><li>222222<li><li>333333333<li><li>44444444444444<li><li>5555555555<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li>
        </ul>
    </div>
</div>

Answer 2

方法恰恰就是改变位置...
设置 div 的overflow为hidden，然后写事件实现拖拽就可以了

Answer 3

是设置div容器的overflow，然后实现div的拖拽就直接实现你说的功能了

Answer 4

    <div id="div" style="height:60px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;">
    </div>
    <div id="div2" style="height:60px;overflow:auto;-webkit-user-select:none;-moz-user-select:none;">
        <ul>
            <li>1111111111111<li><li>222222<li><li>333333333<li><li>44444444444444<li><li>5555555555<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li><li>1111111111111<li>
        </ul>
    </div>    var scroll = false,oldx,oldy;
    div.onmousedown = function(ev){
        ev = ev || window.event;
        oldx = ev.clientX;
        oldy = ev.clientY;
        scroll = true;
    }
    div.onmouseup = function(){
        scroll = false;
    }
    div.onselectstart = function(){
        return false;
    }
    div.onmouseout = function(ev){
        ev = ev || window.event;
        var to = ev.relatedTarget || ev.toElement;
        if(!isParent(to,this)) scroll = false;
    }
    function isParent(c,p){
        var par = c.parentNode,is=false;
        while(par && par!=document.body){
            par = par.parentNode;
            if(par==p){
                is=true;
                return is;
            }
        }
        return is;
    }
    div.onmousemove = function(ev){
        if(scroll){
            ev = ev || window.event;
            var newx = ev.clientX,newy = ev.clientY;
            var div2 = document.getElementById('div2')
            div2.scrollTop += (newy - oldy);
            div2.scrollLeft += (newx - oldx);
            oldx = newx,oldy=newy;
        }
    }