js 拖拽

Posted 向前看！明天会更好！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 拖拽相关的知识，希望对你有一定的参考价值。

<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; position:absolute; background:red;}
</style>
</head>
<script>
window.onload=function(){
    var oDiv=document.getElementById(‘div1‘);
    var disX=0;
    var disY=0;
    oDiv.onmousedown=function(ev){
            var oEvent=ev || event;
            disX=oEvent.clientX-oDiv.offsetLeft;
            disY=oEvent.clientY-oDiv.offsetTop;
            document.onmousemove=function(ev){
                var oEvent=ev || event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
                if(l<0){
                    l=0;
                    }
                    else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
                    {
                        l=document.documentElement.clientWidth-oDiv.offsetWidth;
                    }
                if(t<0){
                    t=0;
                    }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
                    {
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;
                    }
                oDiv.style.left=l+‘px‘;
                oDiv.style.top=t+‘px‘;
                
                }
                    document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
        }
        
    }
</script>

<body>
<div id="div1"></div>
</body>
</html>

 

以上是关于js 拖拽的主要内容，如果未能解决你的问题，请参考以下文章

js拖拽问题，求大神详解

原生JS实现图标图片拖拽

纯js实现DIV拖拽

vuejs2.0使用Sortable.js实现的拖拽功能( 转)

JS拖拽效果的原理及实现

拖拽系列利用JS面向对象OOP思想实现拖拽封装