最主要是js的控制

window.onload = function(){

    var oDiv = document.getElementsByTagName("div")[0];

    /*鼠标点击的位置距离DIV左边的距离 */

    var disX = 0;

    /*鼠标点击的位置距离DIV顶部的距离*/

    var disY = 0;

    oDiv.onmousedown = function(){

        var e = e || window.event;

        disX = e.clientX - oDiv.offsetLeft;

        disY = e.clientY- oDiv.offsetTop;

        document.onmousemove = function(e){

            var e = e || window.event;

            // 横轴坐标

            var leftX = e.clientX - disX;

            // 纵轴坐标

            var topY =e.clientY - disY;

            if( leftX < 0 ){

                leftX = 0;

            }

            /* 获取浏览器视口大小 document.document.documentElement.clientWidth*/

            else if(  leftX > document.documentElement.clientWidth - oDiv.offsetWidth ){

                leftX = document.document.documentElement.clientWidth - oDiv.offsetWidth;

            }

            if( topY < 0 ){

                topY = 0;

            }

            else if( topY > document.documentElement.clientHeight -oDiv.offsetHeight ){

                topY = document.documentElement.clientHeight - oDiv.offsetHeight;

            }

            oDiv.style.left = leftX + "px";

            oDiv.style.top = topY+"px";

        }

        document.onmouseup = function(){

            document.onmousemove = null;

            document.onmouseup = null;

        }

    }

 }

远近互联前端小华整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。

拖拽目标元素 石家庄网站建设 网站建设 网站建设公司