Mouse hold

Question

So, I have this JS program: 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); } }); 

I can show red rect by moving the gray delimiter to the right, but I need this divider to follow my mouse whenever I enter this block. How to do it?

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

To make it work, I also had to tweak the 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; } 

Demo: http://codepen.io/anon/pen/epwQLr