在gamequery中，我试图通过使用mousetracker单击对象并将其拖动来移动所选对象

Question

我知道我可以为此使用mousedown选择，但是我希望单击的精灵跟随我的鼠标，该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

马蒂说的是正确的： $ .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

根据文档 ：

如果启用了鼠标跟踪器，则可以随时通过查看对象$ .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'
});