可拖動的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();
            }
        }
    });