집 > 기사 > 웹 프론트엔드 > js에서 드래그 앤 드롭 이벤트를 구현하는 방법의 예

js에서 드래그 앤 드롭 이벤트를 구현하는 방법의 예

小云云원래의: 2018-03-20 17:09:471510검색

이 기사는 주로 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;
        }
    }
 }

js에서 드래그 앤 드롭 이벤트를 구현하는 방법의 예

이 기사는 주로 js에서 드래그 앤 드롭 이벤트를 구현하는 방법의 예를 공유합니다.

HTML

CSS

JS

관련 기사