Перетаскиваемые divs оставляют след линии при перетаскивании, возможно?

Question

В настоящее время я пытаюсь создать своего рода тактическую тактику тренера, где вы перетаскиваете divs, представляя игроков, чтобы показать линейку или конкретную тактику. Я использую Touch Punch для перетаскивания, и он хорошо работает на ПК, планшетах и ​​smarthpones (два последних являются целевыми платформами).

То, что я хотел бы попробовать и реализовать сейчас, - это когда вы нажимаете кнопки, которые начинаются рисоваться в трейле после игроков при перетаскивании, поэтому образец того, как должен работать конкретный игрок. Это означает, что вы сначала помещаете игроков в стартовые позиции, затем начинаете линию с помощью кнопки, а затем начинаете перетаскивать их в запущенных шаблонах так, чтобы они показывались.

В настоящее время у меня есть линия линий, сделанная в <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(); 
      } 
     } 
    });