Question

我知道我可以使用mousedown选择，但是我想要点击精灵跟随我的鼠标，在api中提到了各种类型的鼠标跟踪功能;但不幸的是，除了声明它允许鼠标检测之外，没有其他例子。

//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：

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

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

2 个答案: