JavaScriptを使用したmousemoveへのトランスフォームの適用は、即時には更新されません。

Question

divをドラッグ可能にしようとしましたが、x軸に沿ってのみ、ビデオコントロールのタイムスタンプの親指を左右にドラッグしてビデオまたはオーディオプレゼンテーション。

は、ここに私のコード

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)' 
    } 

div要素が動かないのです。値は、マウスが動くにつれて急激に変化します。私はコンソールにログオンしたときにそれを見ることができますが、div自体はX軸に沿って翻訳されません。思考？ここで

はjsfiddleです：https://jsfiddle.net/btjLqa8u/1/

Answer 1

あなたが唯一の括弧行方不明：ところでhttps://jsfiddle.net/rjzLtunb/

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

を、ドラッグ＆ドロップのコードのために、あなたはおそらくのdiv親にマウスを移動するために聞きたいですdiv自体の代わりに

Answer 2

マウスの操作を改善してフィドルを更新しました。

jsfiddle

s4mj3ch9