使div在活动区域​​中跟随光标，并在使用百分比后停止跟随它

Question

我是jQuery的新手，我正在制作一个网站，用于模拟信用卡在读卡器中刷卡，使用jquery和仅百分比。我有大部分网站编码，但我无法弄清楚如何使卡 div跟随某个实时区域中的光标，而不是在它离开时跟随。

有一个很好的jsFiddle，我发现这样做，但不能用 var 的 limitX 或 limitY 中的百分比strong>，只有数值。

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;

这是this demo

的jsfiddle

我现在的工作测试版工作的意思是div移动到光标所在的位置，但是我想限制它，因此卡片不会越过绿色方块。这是我当前的jQuery。

$(document).on('mousemove', function (e) {
    $('#card').css({
        left: e.pageX,
        top: e.pageY
    });
})

以及my fiddle

谢谢！

Answer 1

我的老师帮助解决了这个问题。代码全部注释了详细信息。

需要做的是将limitX变量绑定到容器类的宽度，而不是在jquery中指定百分比。

$(document).ready(function () {
//Declaring the container size variable when we dom is ready
//Grabbing the size of an element gives a number no longer a percentage
containerWidth = $(".container").width();
containerHeight = $(".container").height();

http://jsfiddle.net/alexchopjian/5QfYL/5/