Exemple de méthode pour implémenter un événement glisser-déposer dans js-js tutoriel-php.cn

Exemple de méthode pour implémenter un événement glisser-déposer dans js

小云云

Libérer： 2018-03-20 17:09:47

original

1530 Les gens l'ont consulté

Cet article partage principalement avec vous des exemples de méthodes d'implémentation d'événements glisser-déposer dans js, dans l'espoir d'aider tout le monde.

HTML

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

Copier après la connexion

CSS

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

Copier après la connexion

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;
        }
    }
 }

Copier après la connexion

Recommandations associées :

Événement glisser-déplacer HTML

Un cas d'implémentation d'un événement de déplacement de souris JavaScript

Explication HTML5 des événements de déplacement dragstart, drag et dragend

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!