code js pour implémenter l'instance div en faisant glisser la souris-js tutoriel-php.cn

code js pour implémenter l'instance div en faisant glisser la souris

小云云

Libérer： 2018-02-28 09:40:56

original

1622 Les gens l'ont consulté

Cet article partage principalement avec vous le code js pour implémenter des exemples div de glissement de souris. J'espère qu'il pourra aider tout le monde.

Téléchargez le code directement, simple et pratique.

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title> <script type="text/javascript" src=&#39;./js/jquery-1.8.3.min.js&#39;></script> <style type="text/css">#ptest{    width: 200px;    height: 200px;    background: red;    position: absolute;/*这很关键*/
    left: 40%;    top:37%;}#ptest:active{    cursor: move;}</style></head><body><p id="ptest">来，拖拽我啊～</p><script type="text/javascript">var opTest = document.getElementById("ptest");
darg(opTest);function darg(obj){
    //鼠标按下 
    obj.onmousedown = function(ev){

       //IE直接用event或者window.event得到事件本身,而在其他浏览器函数要获取到事件本身需要从函数中传入
    　　var oevent = ev || event;

    　　var distanceX = oevent.clientX - this.offsetLeft;
    　　var distanceY = oevent.clientY - this.offsetTop;        //鼠标移动
    　　document.onmousemove = function(ev){
    　　　　var oevent = ev || event;
    　　　　obj.style.left = oevent.clientX - distanceX + &#39;px&#39;;
    　　　　obj.style.top = oevent.clientY - distanceY + &#39;px&#39;; 
    　　};        //鼠标放开
    　　document.onmouseup = function(){
    　　　　document.onmousemove = null;
    　　　　document.onmouseup = null;
    　　};
    };  
}</script></body></html>

Copier après la connexion

Recommandations associées :

jQuery utilise l'effet de glisser pour obtenir un glissement libre div_jquery

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!