Anwenden von Transformation mit JavaScript auf Mousemove wird nicht im laufenden Betrieb

Question

versucht, ein div schleppbar zu machen, aber nur entlang der x-Achse, wie ein Timestamp Daumen auf einem Video-Steuerelement kann nach links und rechts gezogen werden, durch eine suchen Video- oder Audiopräsentation.

Hier ist mein Code

thumb.addEventListener('mousemove', updateThumbPosition, false) 

    function updateThumbPosition (event) { 
    var thumbRect = thumb.getBoundingClientRect() 
    var startX = seekbar.getBoundingClientRect().left 
    var mouseX = event.clientX 
    console.log(mouseX - startX + thumbRect.width/2) 
    thumb.style.transform = 'translateX(' + mouseX - startX + thumbRect.width/2 + 'px)' 
    } 

Die div bewegt sich nicht. Die Werte ändern sich schnell, wenn sich die Maus bewegt. Ich kann das sehen, wenn ich mich an der Konsole anmelde, aber das div selbst übersetzt nicht entlang der X-Achse. Gedanken?

Hier ist ein jsfiddle: https://jsfiddle.net/btjLqa8u/1/

Answer 1

Sie sind nur Klammern fehlt: https://jsfiddle.net/rjzLtunb/

div.style.transform = 'translateX(' + (mouseX - startX) + 'px)' 

By the way, für Drag & Drop-Code, werden Sie wahrscheinlich für Maus bewegt sich auf dem div Eltern hören möchten anstelle des div selbst.

Answer 2

Ich aktualisierte Sie Geige mit besserer Maus Handhabung.

jsfiddle

s4mj3ch9

var div = document.getElementById('div') 

div.addEventListener('mousedown', mouseDown, false); 
window.addEventListener('mouseup', mouseUp, false); 

function updateDivPosition (event) { 
    var divRect = div.getBoundingClientRect() 
    var startX = seekbar.getBoundingClientRect().left 
    var mouseX = event.clientX 
    div.style.transform = 'translateX(' + (mouseX - startX) + 'px)' 
} 
function mouseUp(){ 
    window.removeEventListener('mousemove', updateDivPosition, true); 
} 
function mouseDown(){ 
    window.addEventListener('mousemove', updateDivPosition, true); 
}