Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes

<div class="bar_wrap" id="wrap"><!--Äußeres Hüllelement-->
 <div class="bar_container"><!--Schieberegler-->
  <div class="bar_into"></div><!--Folienspuren-->
 </div>
 <div class="bar_drag"><!--Schieberegler-->
  <div class="bar_text"></div><!--Text-->
 </div>
</div>

//Das äußere umschließende Element abrufen var eBarWrap = document.getElementById('wrap');
 //Den Schieberegler abrufen var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
 //Gleitendes Spurelement abrufen var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
 //Den Schieberegler abrufen var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
 //Textelement abrufen var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];

//Maximale Position abrufen var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;

 //Slider fügt Drag-Ereignis hinzu eBarDrag.addEventListener('mousedown',function(event){
  
 });

//Slider fügt Drag-Ereignis hinzu eBarDrag.addEventListener('mousedown',function(event){
  //Klickposition der Maus initialisieren, um mit dem Ziehen zu beginnen var nInitX = event.clientX;
  //Schiebereglerposition initialisieren var nInitLeft = this.offsetLeft;
 });

//Slider fügt Drag-Ereignis hinzu eBarDrag.addEventListener('mousedown',function(event){
  /*…*/

  //Seite bindet Mausbewegungsereignis document.onmousemove = event=>{
   //Das Standardverhalten beim Bewegen der Maus abbrechen, um die Auswahl anderer Elemente oder von Text zu vermeiden event.preventDefault();
   //Holen Sie sich die Position, zu der der Schieberegler nach der Mausbewegung bewegt werden soll. let nX = event.clientX - nInitX + nInitLeft;
   //Begrenzung der maximalen Bewegungsposition des Schiebereglers if(nX>=nMax){
    nX = nMax;
   }
   //Begrenzung der minimalen Bewegungsposition des Schiebereglers if (nX <= 0) {
    nX = 0;
   }
   //Ändere die Position des Schiebereglers (da die Pfeilfunktion verwendet wird, zeigt diese immer noch auf den Schieberegler)
   dieser.Stil.links = nX + 'px';
   //Ändern Sie die Breite der Gleitspur eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
   //Den Textwert ändern eBarText.innerHTML = Math.ceil(nX/nMax*100)/10;
  };
 });

//Slider fügt Drag-Ereignis hinzu eBarDrag.addEventListener('mousedown',function(event){
  /*…*/

  //Mausbindungsereignis freigeben und alle Ereignisse auf der Seite abbrechen document.onmouseup = function(event){
   Dokument.onmousemove = null;
   Dokument.onmouseup = null;
  }
 });

//Den Standardwert ändern eBarText.innerHTML = 0;

//Schieberegler fügt Klickereignis hinzu eBarCon.addEventListener('click',function(event){
  //Schiebereglerposition festlegen var nLeft = this.offsetLeft;
  //Holen Sie sich das positionierte übergeordnete Element var eParent = this.offsetParent;
  //Durchlaufe alle positionierten übergeordneten Elemente while(eParent){
   //Addieren Sie den OffsetLeft-Wert des übergeordneten Elements, um den Abstand zwischen dem Schieberegler und der linken Seite der Seite genau zu bestimmen. nLeft += eParent.offsetLeft;
   //Holen Sie sich das positionierte übergeordnete Element wieder außerhalb des übergeordneten Elements eParent = eParent.offsetParent;
  }
  //Schiebereglerposition berechnen var nX = event.clientX - nLeft;
  //Die Position des Schiebereglers ändern eBarDrag.style.left = nX + 'px';
  //Ändern Sie die Breite der Gleitspur eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
  //Ändern Sie den Textwert eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
 });