Как реализовать анимацию Drag-and-drop для иконок

Question

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

Answer 1

как можно реализовать подобную анимацию, .....

ну и в целом нужно чтобы визуально выглядело все как на скриншоте,

А вот это как раз самоё трудоёмкое, без помощи автора вопроса.
Было бы очень неплохо, если бы при оформлении вопроса TC добавлял бы конкретные иконки. Тогда и вопрос был бы более конкретным и шанс получить конкретный ответ был бы выше.

Связать две иконки линией, состоящей из кружков, которые динамично меняют своё взаимное расположение при перетаскивании иконок, получилось сделать с помощью техники
Необычные эффекты stroke-dasharray

Прямую линию заменил на кубическую кривую Безье так как прямая линия при перетаскивании заходит за иконки и это не оч. хорошо выглядит.

Для реализации drag and drop использовал jQuery

var dvA       = document.querySelector("#a");
var dvB       = document.querySelector("#b");
var arrowR = document.querySelector("#arrowR");

var drawConnector = function() {
  
  var posnAR = {
    x: dvA.offsetLeft + dvA.offsetWidth + 4,
    y: dvA.offsetTop  + dvA.offsetHeight / 2    
  };
  
  var posnBR = {
    x: dvB.offsetLeft + dvB.offsetWidth + 8,
    y: dvB.offsetTop  + dvA.offsetHeight / 2
  };
   
  var StrRight =
      "M" +
      (posnBR.x      ) + "," + (posnBR.y) + " " +
      "C" +
      (posnBR.x + 150) + "," + (posnBR.y) + " " +
      (posnAR.x + 150) + "," + (posnAR.y) + " " +
      (posnAR.x      ) + "," + (posnAR.y);
  arrowR.setAttribute("d", StrRight);
};

$("#a, #b").draggable({
  drag: function(event, ui) {
    drawConnector();
  }
});

setTimeout(drawConnector, 250);

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background:#F8F8F8;
}

#a, #b {
  padding: 10px;
  position: fixed;
  width: 108px;
  height: 135px;
  
}
#a {
  background-image:url(https://i.stack.imgur.com/RJ21B.png);
  background-size:cover;
  left:100px;
  top: 20px;
}
#b {
  background-image:url(https://i.stack.imgur.com/XBflv.png);
  background-size:cover;
  left:250px;
  top: 180px;
  
} 
#c {
text-align:center;
position: fixed;
top:5%;
left:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  
  <g fill="none" stroke="#8DBDAD" stroke-width="10" stroke-dasharray="0,20 " stroke-linecap="round" >
     <path id="arrowR"/>
  </g>
</svg> 

<div id="c"> Перемещайте иконки </div>
<div id="a"></div>
<div id="b"></div>

Update

Добавлена анимация перемещения кружков в связующем звене

Для большей наглядности перетаскивайте мышкой иконки

var dvA       = document.querySelector("#a");
var dvB       = document.querySelector("#b");
var arrowR = document.querySelector("#arrowR");

var drawConnector = function() {
  
  var posnAR = {
    x: dvA.offsetLeft + dvA.offsetWidth + 2,
    y: dvA.offsetTop  + dvA.offsetHeight / 2    
  };
  
  var posnBR = {
    x: dvB.offsetLeft + dvB.offsetWidth + 8,
    y: dvB.offsetTop  + dvA.offsetHeight / 2
  };
   
  var StrRight =
      "M" +
      (posnBR.x      ) + "," + (posnBR.y) + " " +
      "C" +
      (posnBR.x + 150) + "," + (posnBR.y) + " " +
      (posnAR.x + 150) + "," + (posnAR.y) + " " +
      (posnAR.x      ) + "," + (posnAR.y);
  arrowR.setAttribute("d", StrRight);
  arrowR.setAttribute("stroke", '#8DBDAD');
};

$("#a, #b").draggable({
  drag: function(event, ui) {
    drawConnector();
  }
});

setTimeout(drawConnector, 250);

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background:#F8F8F8;
}

#a, #b {
  padding: 10px;
  position: fixed;
  width: 108px;
  height: 135px;
  
}
#a {
  background-image:url(https://i.stack.imgur.com/RJ21B.png);
  background-size:cover;
  left:100px;
  top: 20px;
}
#b {
  background-image:url(https://i.stack.imgur.com/XBflv.png);
  background-size:cover;
  left:250px;
  top: 180px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs> 
    <linearGradient id="Lg>
      <stop offset="0%" stop-color="red" />
       <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs> 
  
  <g fill="none"  stroke-width="12" stroke-dasharray="0,18 " stroke-linecap="round" >
     <path id="arrowR">
       <animate id="anT" attributeName="stroke-dashoffset" begin="0" values="0;400;400;0;0" dur="8s" repeatCount="indefinite" />
     </path>
  </g>
</svg>
<div id="a"></div>
<div id="b"></div>

БЛОГ НА HUSL

Как реализовать анимацию Drag-and-drop для иконок

Ответы (1 шт):

Update