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

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

1 个答案: