在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'
});