js实现拖拽事件的方法实例-js教程-PHP中文网

js实现拖拽事件的方法实例

小云云

发布： 2018-03-20 17:09:47

原创

1764人浏览过

本文主要和大家分享js实现拖拽事件的方法实例，希望能帮助到大家。

HTML

<body> 
     <p></p></body>

登录后复制

CSS

p{        position: absolute;        width: 200px;        height: 200px;        background: #369
    }

登录后复制

JS

window.onload = function(){
    var op = document.getElementsByTagName("p")[0];

    /*鼠标点击的位置距离p左边的距离 */
    var disX = 0;
    /*鼠标点击的位置距离p顶部的距离*/
    var disY = 0;
    op.onmousedown = function(){
        var e = e || window.event;
        disX = e.clientX - op.offsetLeft;
        disY = e.clientY- op.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 - op.offsetWidth ){
                leftX = document.document.documentElement.clientWidth - op.offsetWidth;
            }

            if( topY < 0 ){
                topY = 0;
            }
            else if( topY > document.documentElement.clientHeight -op.offsetHeight ){
                topY = document.documentElement.clientHeight - op.offsetHeight;
            }
            op.style.left = leftX + "px";
            op.style.top = topY+"px";
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
 }

登录后复制

相关推荐：

html drag拖拽事件

JavaScript鼠标拖拽事件实现的案例

PHP、MySQL和Apache的学习

PHP是程式语言、MySQL是资料库，要学好任何一种都不是件容易的事，而我们，还要将它做出成果出来！很难吗？不会的！有好的方法、好的流程，其实是可以很轻松的学会，并且应用在网页上的。书里所介绍的是观念、流程，一个步骤一个步骤依照需求，就可以做出我们要的结果，不怕做不出来，希望藉由这本书，可以让你将这些观念实现在你的网站里。 PHP & MySQL的学习，只要有正确的观念、正确