は、入力した

Question

上にマウスを持っだから私はこのJSプログラム持っている： http://codepen.io/anon/pen/avgQVa

$('.divider').draggable({ 
    axis: 'x', 
    drag: function(e, ui) { 
    $('.right').width(100 - ui.position.left); 
    $('.yellow').css('right', ui.position.left); 
    } 
}); 

を私は右に灰色の仕切りを移動することによって、赤RECTを明らかにすることができますが、私はいつでも私のマウスを追跡するために、この分周器を必要とします私はこのブロックに入る。これはどうすればいいですか？

Answer 1

// Handle the mouse move event on the parent div 
$("div:first").mousemove(function(e) { 
    // calculate the mouse position relative to the div element position on the page 
    var x = e.pageX - $(this).offset().left; 
    $('.divider').css('left', x); 
    $('.left').css('width', x); 
}); 

はそれを動作させるためには、私もCSSを微調整する必要がありました：

.left { 
    left: 0px; 
/* This makes the left div render "above" the others, so when we change its width it shows up */ 
    z-index: 1; 
} 

はデモ：http://codepen.io/anon/pen/epwQLr