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

Question

我目前正在尝试制作一种在线教练战术板，您可以在其中拖着 div 冒充球员来展示阵容或特定战术。 我使用Touch Punch 进行拖动，它在个人电脑、平板电脑和智能手机（最后两个是目标平台）上运行良好。

我现在想尝试和实现的是，当您按下按钮时，在玩家拖动后开始在轨迹中绘制线条，因此特定玩家应该如何运行的模式。 这意味着您将首先将玩家置于起始位置，然后使用按钮开始线路轨迹，然后开始在运行模式中拖动他们以显示。

我目前在<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();
            }
        }
    });