在gamequery中，我试图用鼠标跟踪器移动选定的对象，方法是单击并拖动该对象

Question

我知道我可以使用鼠标向下选择，但我希望点击的精灵跟随我的鼠标，api中提到的mousetracker函数；但不幸的是，除了声明它允许鼠标检测之外，没有其他示例。

//add mousedown events for yarnballs.
$(".gQ_sprite").mousedown(function() {
    clickedDivId = $(this).attr('id');
    if(clickedDivId.charAt(8) == "-")
    {
        currentClickedDivId = clickedDivId
        $(document).mousemove(function(e){
            spriteXPosition = e.pageX
            spriteYPosition = e.pageY
        });

    }
});

我已经选定了鼠标的位置，只是不确定如何让选定的精灵跟随它。

任何帮助都将不胜感激。

Answer 1

Mati所说的是正确的：$.gQ.mouseTracker允许您在事件处理程序之外访问鼠标的状态。他给出的例子是正确的，但它不能用于移动gQ对象(精灵、磁贴图或组)，因为您不允许对这些对象使用.css()函数。这样做会破坏碰撞检测。

如果您想要移动gQ对象，则应改为执行以下操作：

$('#' + currentClickedDivId).xy($.gQ.mouseTracker.x, $.gQ.mouseTracker.y);

但由于此操作应在定期回调中完成，因此拖动的平滑度将取决于刷新率。

如果你想使用事件处理程序，你可以修改你的代码，使其看起来像这样(不使用mouseTracker)：

var clickedDiv;
var clickedDivOffset = {x:0, y:0};

$(".gQ_sprite").mousedown(function(e) {
    clickedDiv = $(this);
    clickedDivOffset = {
        x: e.pageX - clickedDiv.x() - $().playground().offset().left,
        y: e.pageY - clickedDiv.y() - $().playground().offset().top
    };
});

$(".gQ_sprite").mouseup(function() {
    clickedDiv = false;
});

$().playground().mousemove(function(e) {
    if(clickedDiv){
        clickedDiv.xy(
            e.pageX - clickedDivOffset.x,
            e.pageY - clickedDivOffset.y,
        );
    }
});

这将实现拖放效果。如果你想让点击的元素停留在鼠标上，你必须稍微修改一下代码，但基本原理保持不变。

Answer 2

根据documentation的说法

如果启用了鼠标跟踪器，则可以随时检查鼠标的状态，方法是查看object $.gQ.mouseTracker，其中x和y包含鼠标的位置，1、2和3为布尔值，其中true表示按下了第一个、第二个或第三个按钮。

观察以下命令的输出：

$("#playground").playground({ refreshRate: 60, mouseTracker: true });

$.playground().startGame();
$.playground().registerCallback(function(){
    console.log( $.gQ.mouseTracker );
}, 1000);

要使这些div真正跟随光标，必须使用.css()

$('#' + currentClickedDivId).css({
    top:  $.gQ.mouseTracker.y + 'px',
    left: $.gQ.mouseTracker.x + 'px'
});