可拖动的div可以在拖动时留下线迹吗？

Question

我现在正在尝试制作一种在线教练战术板，你可以在那里拖着扮成球员的div来展示阵容或特定的战术。 我正在使用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();
            }
        }
    });