Heim > Artikel > Web-Frontend > Javascript macht DOM-Elemente ziehbar_Grundkenntnisse

Javascript macht DOM-Elemente ziehbar_Grundkenntnisse

WBOYOriginal: 2016-05-16 15:10:071647Durchsuche

Zusammenfassung:

Kürzlich habe ich in meinem Projekt an einer Bildvorschaufunktion gearbeitet. Zu diesem Zeitpunkt laden Benutzer große Bilder hoch, die über die Ansichtsoberfläche hinausgehen. Schließlich wurde beschlossen, eine Position mit einer festen Breite und Höhe festzulegen, und Benutzer können das Bild ziehen, um es anzuzeigen. Deshalb habe ich ein Plug-in geschrieben, das ziehbare DOM-Elemente für Browser wie IE5+, Chrome, Firefox und Opera unterstützt.

Es sind nicht viele Wissenspunkte erforderlich, um diese Funktion wie folgt zu implementieren:

1. element.style.left

in js

Die von style.left zurückgegebene Variable ist eine Zeichenfolge und eine Variablenvariable

element.offsetLeft

in js

offsetLeft gibt einen int-Typ zurück, eine unveränderliche Variable (was bedeutet, dass das Ändern dieser Variablen keine Auswirkungen auf das Layout hat)

2. event.clientX in js

clientX-Ereigniseigenschaft gibt die horizontale Koordinate des Mauszeigers auf die Browserseite (oder den Clientbereich) zurück, wenn das Ereignis ausgelöst wird.

3. element.className

in js

Kursmethoden, die den Stil verändern

Die oben genannten drei Punkte sind allesamt relativ bekanntes Wissen. Was ich sagen möchte, ist Folgendes:

4. Ereignisüberwachung für Objekte in js hinzufügen

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

Ereignis: zeigt Ereignis an

Spaß: bezieht sich auf die Funktion, die ausgeführt wird, nachdem das Ereignis ausgelöst wurde

Projektadresse: https://github.com/baixuexiyang/drag

Beispiel:

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

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

      }
    });

Sehen wir uns das Problem in einem anderen Beispiel an. Ich arbeite schon lange an diesem Problem und kann immer noch keine gute Lösung finden

Sehen wir uns ein Beispiel an: (Zur Vereinfachung des Testens habe ich den Code in eine Datei geschrieben)

drag.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>

Der Code ist sehr einfach. Wenn Sie bereit sind, ihn mit ein wenig Aufmerksamkeit zu lesen, können Sie ihn verstehen

Das erste Ziehen war erfolgreich, halten Sie die Maus gedrückt und ziehen Sie. Beim zweiten Mal funktioniert es nicht richtig. Wenn Sie möchten, dass es beim zweiten Mal normal funktioniert, müssen Sie mit der Maus auf eine andere Stelle klicken (d. h. auf den nicht ziehenden Teil)

Mausereignisse oben

„mousedown“ bedeutet, dass dieses Ereignis ausgelöst wird, wenn die Maus gedrückt wird (die Funktion beforeDrag wird oben ausgelöst)

„mousemove“ bedeutet, dass dieses Ereignis ausgelöst wird, wenn sich die Maus bewegt (die onDrag-Funktion wird oben ausgelöst)

„mouseup“ bedeutet, dass dieses Ereignis ausgelöst wird, wenn die Maus gedrückt und dann losgelassen wird. (Die endDrag-Funktion wird oben ausgelöst)

ps: Die online überprüfte Mauszeit ist „onmousedown“. Der Autor hat „onmousedown“ getestet und es gab keine Ereignisreaktion, aber „mousedowm“ war normal

Für das oben genannte Problem habe ich viele Experimente durchgeführt und dabei das Reihenfolgeproblem von addEventListener und das Ereignisflussproblem des dritten Parameters wahr/falsch berücksichtigt, aber ich habe immer noch keine perfekte Lösung gefunden

Das „Mouseup“-Ereignis konnte zum zweiten Mal nicht überwacht werden und es ist normal, den Fokus wiederzugewinnen (klicken Sie einfach mit der Maus an eine andere Stelle)

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Diskussion über die verbesserte Implementierung von Sticky-Komponenten_Javascript-FähigkeitenNächster Artikel：Eine kurze Diskussion über die verbesserte Implementierung von Sticky-Komponenten_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen