在另一个 div 内移动 mousemove 上的 div答案

【问题标题】：moving a div on mousemove inside another div在另一个 div 内移动 mousemove 上的 div
【发布时间】：2013-10-09 11:18:36
【问题描述】：

我正在尝试使容器 div 内的 div 在 X 轴上沿鼠标的相反方向移动（仅向左和向右）。

这是我目前所拥有的：

html

<div class="container">
    <div class="box"></div>
</div>

css

.container { width: 450px; height: 52px; border: 1px #000 solid; position: relative; }
.box { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; right: 200px; }

jquery

$(document).ready(function(){
  $('div.container').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
      if ($('div.box').css('right') <= '400') {
          $('div.box').css({'right': x}); 
      }
  });
});

JSfiddle - http://jsfiddle.net/eyalbin/qQmu7/49/

由于某种原因，该功能在几秒钟后停止工作。

谁能帮忙

【问题讨论】：

标签： jquery css html mousemove

【解决方案1】：

试试这个：JSFiddle

你写的

if ($('div.box').css('right') <= '400')

而不是

if (x <= 400)

【讨论】：

【解决方案2】：

应该这样做

$(document).ready(function(){
  $('div.container').mousemove(function(e){
      var x = e.pageX - this.offsetLeft;
      if ((x <= 400)) {
          $('div.box').css({'right': x}); 
      }
  });
});

FIDDLE

【讨论】：

【解决方案3】：

$(document).ready(function(){
   $('div.container').on('mousemove',function(e){
    var x = e.pageX - this.offsetLeft;

      $('div.box').css({'right': x}); 

   });
});

检查此链接工作得很好，伙计...

Js Fiddle Demo

【讨论】：

【解决方案4】：

$('#parent .child').mousemove( function(e) {


       var parent_x = this.offsetLeft; //get parent position
       var parent_y = this.offsetTop;      

       var mouseX   =  e.pageX; //get mouse move position
       var mouseY   =  e.pageY;

       var boxPositionX = mouseX-parent_x+5;
       var boxPositionY = mouseY-parent_y+5;

       $('.hover-box',this).css({'top': boxPositionY,'left': boxPositionX});
    });

/////////CSS

.hover-box{
   position:absolute;
}

【讨论】：