simple js slider, lesen von ofssetX make handler jumpy

Question

Ich versuche, sehr einfache horizontale Slider mit reinem Javascript zu bauen, ich will keine Bibliotheken wie jquery. Aufgabe schien am Anfang einfach, aber ich habe ein Problem gefunden. Ich versuche, Messwerte von offsetX Eigenschaft zu erhalten, um den Handler an der richtigen Stelle zu setzen. Das Problem ist, dass wenn ich den Handler auf der Spur gleite, er manchmal das Ereignisziel wechselt und die Messwerte vom Handler in den Schieberegler-Container ändert. Dieser gesamte visuelle Effekt ist nicht der beste.

das ist, wie ich dies konstruiert:

fiddle demo

Ich denke, diese Lösung wäre Ereignis aus falschen Ablesungen zu verhindern (von Handler

var dragging = false; 

document.querySelector('.slider').onmousemove = function(event) { 
    if(dragging) { 
     document.querySelector('.handler').style.left = (event.offsetX - 15) + 'px'; 
    } 
}; 

document.querySelector('.handler').onmousedown = function(event) { 
    dragging = true; 
}; 

window.onmouseup = function(event) { 
    dragging = false; 
} 

:

<div class="slider"> 
    <div class="track"> 
     <div class="handler"></div> 
    </div> 
</div> 

und der Code hinter oder Spur) und verwenden Sie immer nur die Mausposition relativ zum Schieberegler div. Aber wie das geht, weiß ich noch nicht. Tut jemand? ;)

Answer 1

Ihre Annahmen sind korrekt, da event.offsetX relativ zum ursprünglichen Ereignisziel ist, erhalten Sie unterschiedliche Werte von Handler, Track und Slider. Sie können stattdessen den Offset basierend auf den Slider- und Mauspositionen relativ zum Clientfenster berechnen. Sehen Sie sich das angehängte Code-Snippet an.

var dragging = false; 
 
var sliderEl = document.querySelector('.slider'); 
 
var handlerEl = document.querySelector('.handler'); 
 

 
sliderEl.onmousemove = function(event) { 
 
    if (dragging) { 
 
    var sliderRect = sliderEl.getBoundingClientRect(); 
 
    var offset = Math.max(event.clientX - sliderRect.left, 0); 
 
    offset = Math.min(offset, sliderRect.width); 
 
    handlerEl.style.left = (offset - 15) + 'px'; 
 
    } 
 
    return false; 
 
}; 
 

 
handlerEl.onmousedown = function(event) { 
 
    dragging = true; 
 
}; 
 

 
window.onmouseup = function(event) { 
 
    dragging = false; 
 
}

#container { 
 
    width: 500px; 
 
    height: 40px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.slider, 
 
.slider * { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.slider { 
 
    background: #ccc; 
 
    border: solid 1px #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.slider .track { 
 
    width: 100%; 
 
    background: #000; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: calc(50% - 10px); 
 
} 
 
.slider .track .handler { 
 
    border: solid 1px #fff; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: lime; 
 
    position: absolute; 
 
    top: calc(50% - 15px); 
 
    left: 0px; 
 
    cursor: pointer; 
 
}

<div id="container"> 
 

 
    <div class="slider"> 
 
    <div class="track"> 
 
     <div class="handler"></div> 
 
    </div> 
 
    </div> 
 

 
</div>