3

I'm currently trying to make a sort of online coach tactic board where you drag around divs posing as players to show a lineup or a specific tactic. I'm using Touch Punch for the dragging and it works well, on PCs, tablets and smarthpones (the two last ones being the target platforms).

What i would like to try and implement now is when you press a button lines start to be drawn in the trail after the players when dragged, so a pattern of how a specific player should run. Meaning you would first place players in starting positions, then start the line trail with a button, then start dragging them around in the running patterns so that is shown.

I currently have drawing of lines done in a <canvas>, but it means you drag the lines separate of dragging the players, which sometimes gets crowded and its easy to start dragging a div instead of starting to draw a line starting next to a div, especially on a touchscreen.

Anyone have any idea if this would be possible?

MGJ
  • 147
  • 2
  • 12
  • Couple the dragging with the painting. Paint on the canvas using the the `top` and `left` values of the dragged divs. – raam86 Dec 25 '13 at 22:28
  • The problem is that the divs are overlaying the canvas to be able to be dragged on top of it, which means the canvas doesn't seem to register the cursor when it's pointing on a div. If i draw the lines now, and draw it over a div, it stop drawing the line right there. – MGJ Dec 25 '13 at 22:51
  • Don't use the cursor. Use the div location – raam86 Dec 26 '13 at 11:04
  • Ah, clever. I'll see if i can get that working. – MGJ Dec 26 '13 at 14:56
  • @raam86 Thank you raam86, never imagined it would have been this simple. – MGJ Dec 27 '13 at 01:01

1 Answers1

2

Thank you raam86, never imagined it would have been this simple.

This is how i solved it in case someone comes down this road:

$( "[id^=home]" ).draggable({
        // options...
        start: function(event,ui){
            context.strokeStyle = 'Blue';
            $( this ).addClass("dragging");
            if (drawWhenDragging){
                context.beginPath();
                context.moveTo(ui.position.left+$(this).width()/2, ui.position.top+$(this).width()/2);
            }
        },
        drag: function(event,ui){
            $( this ).addClass("dragging");
            if (drawWhenDragging){
                context.lineTo(ui.position.left+$(this).width()/2, ui.position.top+$(this).width()/2);
                context.stroke();
            }
        },
        stop: function(event,ui){
            $( this ).removeClass("dragging");
            if (drawWhenDragging){
                context.closePath();
            }
        }
    });
MGJ
  • 147
  • 2
  • 12