Maison > interface Web > js tutoriel > code js pour implémenter l'instance div en faisant glisser la souris

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

小云云
Libérer: 2018-02-28 09:40:56
original
1724 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal