按住鼠标进入

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

我可以通过向右移动灰色分隔线来显示红色矩形，但每当我进入此块时，我需要使用此分隔符跟随鼠标。我该怎么做？

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