Maison > Article > interface Web > Javascript rend les éléments DOM draggables_Basic

Javascript rend les éléments DOM draggables_Basic

WBOYoriginal: 2016-05-16 15:10:071645parcourir

Résumé :

Récemment, je souhaite créer une fonction d'aperçu d'image dans mon projet. À ce stade, je rencontrerai des utilisateurs téléchargeant de très grandes images, qui ont dépassé l'interface d'affichage. Enfin, nous avons décidé de créer une position avec une largeur et une hauteur fixes, et les utilisateurs peuvent faire glisser l'image pour la visualiser. J'ai donc écrit un plug-in qui prend en charge les éléments DOM déplaçables pour les navigateurs tels que ie5+, Chrome, Firefox et Opera.

Il n'y a pas beaucoup de points de connaissances nécessaires pour mettre en œuvre cette fonction, comme suit :

1. element.style.left

en js

La variable renvoyée par style.left est une chaîne et une variable variable

element.offsetLeft

en js

offsetLeft renvoie un type int, une variable immuable (ce qui signifie que changer cette variable n'affectera pas la mise en page)

2. event.clientX en js

La propriété d'événement clientX renvoie la coordonnée horizontale du pointeur de la souris vers la page du navigateur (ou la zone client) lorsque l'événement est déclenché.

3. element.className

en js

Méthodes de cours qui changent de style

Les trois points ci-dessus sont tous des connaissances relativement familières. Ce que je veux dire est le suivant :

4. Ajouter une surveillance des événements pour les objets en js

element.addEventListener("event","fun","boolen");

événement : indique un événement

fun : fait référence à la fonction exécutée après le déclenchement de l'événement

Adresse du projet : https://github.com/baixuexiyang/drag

Exemple :

var drag = new Drag("test", {
      onStart: function(){

      },
      onMove: function(){
        document.getElementById('position').innerHTML = '距离左边：' + drag.getPositions().left + '；距离顶部：' + drag.getPositions().top;
      },
      onStop: function(){

      }
    });

Regardons le problème rencontré dans un autre exemple. Je travaille sur ce problème depuis longtemps et je n'arrive toujours pas à trouver une bonne solution

Regardons un exemple : (Pour faciliter les tests, j'ai écrit le code dans un fichier)

glisser.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>鼠标拖拽</title> 
  <style type="text/css"> 
    <!-- 
    #dragdiv{ 
      background-color:#0A0909; 
      height:200px; 
      width:157px; 
     
      position:absolute; 
    } 
    .ondrag{ 
      filter:alpha(opacity=200); 
      cursor:move; 
    } 
    .enddrag{ 
      filter:alpha(opacity=100); 
      cursor:default; 
    } 
    #father{ 
      width:600px; 
      height:700px; 
      background:#C63535; 
    } 
    --> 
  </style> 
</head> 
<body> 
  <div id="father"> 
  <div id="dragdiv"></div> 
  </div> 
  <script language="JavaScript"> 
    var dragdiv=document.getElementById("dragdiv"); 
    var father=document.getElementById("father"); 
    var offsetx=0; 
    var offsety=0; 
    var draging=false; 
    function beforeDrag(ev){ 
       
        if (!draging) { 
          draging = true; 
          var l = dragdiv.offsetLeft; 
          var t = dragdiv.offsetTop; 
          offsetx = ev.clientX - l; 
          offsety = ev.clientY - t; 
           
        } 
        else { 
          dragdiv.className = "enddrag"; 
          dragdiv.removeEventListener("mousemove",onDrag); 
          draging = false; 
          return; 
        } 
       
    } 
    function endDrag(){ 
      draging=false; 
      dragdiv.className="enddrag"; 
    } 
    function onDrag(ev){ 
      if (!draging) { 
        dragdiv.className = "enddrag"; 
        return; 
      } 
      else { 
        dragdiv.className = "ondrag"; 
       
        dragdiv.style.left = (ev.clientX - offsetx) + "px"; 
        dragdiv.style.top = (ev.clientY - offsety) + "px"; 
         
      } 
    } 
      dragdiv.addEventListener("mousedown",beforeDrag,true); 
      dragdiv.addEventListener("mousemove",onDrag,false); 
      dragdiv.addEventListener("mouseup",endDrag,true); 
 
  </script> 
 
</body> 
 
</html>

Le code est très simple, si vous êtes prêt à le lire avec un peu d'attention, vous pouvez le comprendre

Le premier glisser a réussi, il suffit de maintenir la souris enfoncée et de faire glisser. Cela ne fonctionnera pas correctement la deuxième fois. Si vous souhaitez que cela fonctionne normalement la deuxième fois, vous devez cliquer avec la souris ailleurs (c'est-à-dire sur la partie qui ne fait pas glisser)

Événements de souris ci-dessus

"mousedown" signifie que cet événement est déclenché lorsque la souris est enfoncée, (la fonction beforeDrag est déclenchée ci-dessus)

"mousemove" signifie que cet événement est déclenché lorsque la souris bouge, (la fonction onDrag est déclenchée ci-dessus)

"mouseup" signifie que cet événement est déclenché lorsque la souris est enfoncée puis relâchée. (La fonction endDrag est déclenchée ci-dessus)

ps : L'heure de la souris vérifiée en ligne est "onmousedown". L'auteur a testé "onmousedown" et il n'y a eu aucune réponse à l'événement, mais "mousedowm" était normal

Pour le problème mentionné ci-dessus, j'ai essayé de nombreuses expériences, en prenant en compte le problème d'ordre de addEventListener et le problème de flux d'événements du troisième paramètre vrai/faux, mais je n'ai toujours pas trouvé de solution parfaite

L'événement "mouseup" n'a pas pu être surveillé pour la deuxième fois, et il est normal de retrouver le focus (il suffit de cliquer avec la souris ailleurs)

Déclaration：

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

Article précédent：Une brève discussion sur la mise en œuvre améliorée des compétences Sticky composants_javascriptArticle suivant：Une brève discussion sur la mise en œuvre améliorée des compétences Sticky composants_javascript

Articles Liés

Voir plus