javascript - 可拖动的 div 在拖动时留下一条线迹，可能吗？

Question

我目前正在尝试制作一种在线教练战术板，您可以在其中拖动假扮成球员的 divs 来展示阵容或特定战术。 我正在使用 Touch Punch对于拖动，它在 PC、平板电脑和智能手机(最后两个是目标平台)上运行良好。

我现在想尝试实现的是，当您按下一个按钮时，拖动球员后的轨迹开始绘制线条，这是特定球员应该如何奔跑的模式。 这意味着您首先要将玩家置于起始位置，然后使用按钮启动直线轨迹，然后开始在运行模式中四处拖动他们，以便显示。

我目前在 <canvas> 中绘制线条，但这意味着您将线与拖动玩家分开，这有时会变得拥挤，并且很容易开始拖动 div 而不是开始在 div 旁边开始绘制一条线，尤其是在触摸屏上。

有人知道这是否可行吗？

Answer 1

谢谢 raam86，没想到会这么简单。

如果有人走这条路，我就是这样解决的:

$( "[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();
            }
        }
    });