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

Question

I know I can use mousedown selection for it, but I am wanting the clicked on sprite to follow my mouse, there is a mousetracker function of sorts mentioned in the api; but unfortunately there are no examples of this other than stating that it allows mouse detection.

//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
        });

    }
});

I have the location of the mouse selected, just not sure how to get the selected sprite to follow it.

any help would be greatly appreciated.

Answer 1

What Mati said is correct: $.gQ.mouseTracker allows you to access the mouse's state outside of an event handler. The example he gives is correct but it can't be used to move a gQ object (sprite, tile-map or group) around because you'r not allowed to use the .css() function for those. Doing so will break collision detection.

If what you want is to move a gQ object you should do this instead :

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

But since this should be done in a periodical callback, the smoothness of the dragging will depend on the refresh rate.

If you want to use event handlers instead you could modify you code to look like this (without using the 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,
        );
    }
});

This will implement a drag-n-drop effect. If you want the clicked element to stick to the mouse you will have to slightly adapt the code but the basics will remain the same.

Answer 2

According to the documentation :

If the mouse tracker is enabled you can check the state of the mouse at anytime by looking into the object $.gQ.mouseTracker where x and y contain the position of the mouse and 1, 2 and 3 a boolean value where true means that the first, second or thrid button is pressed.

Observe the output of:

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

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

To make those divs actually follow the cursor, you have to use .css()

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