首頁 > web前端 > js教程 > 主體

js實作拖曳事件的方法實例

小云云
發布: 2018-03-20 17:09:47
原創
1513 人瀏覽過


本文主要跟大家分享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滑鼠拖曳事件實現的案例

#HTML5講解拖曳事件dragstart、drag與dragend

##

以上是js實作拖曳事件的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板