Доработай пример, чтобы при создании блок можно было двигать
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Конструктор</title>
  <style>
    #canvas {
      width: 1000px;
      height: 600px;
      border: 1px solid #000;
      margin-bottom: 20px;
    }

    #block-form {
      display: none;
    }

    #block-form label {
      display: block;
      margin-bottom: 10px;
    }

    .block {
      position: absolute;
      background-color: #f2f2f2;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      cursor: move;
    }

    .block.selected {
      border-color: red;
    }

    .connector {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #000;
      position: absolute;
      bottom: -3px;
    }

    .connector.selected {
      border-bottom-color: red;
    }

    .connector.parallel {
      margin-left: -3px;
    }

    .connector.sequential {
      left: 50%;
      margin-left: -3px;
    }
  </style>
</head>
<body>
  <button id="add-block-button">Добавить блок</button>
  <div id="canvas"></div>
  <div id="block-form">
    <form>
      <label for="block-type">Тип блока:</label>
      <select id="block-type" name="block-type">
        <option value="rele">Реле</option>
        <option value="knopka">Кнопка</option>
        <option value="wiegand26">Wiegand26</option>
        <option value="trigger">Триггер мод.</option>
        <!-- Другие типы блоков -->
      </select>
      <!-- Дополнительные параметры в зависимости от типа блока -->
      <button type="submit">Создать блок</button>
    </form>
  </div>

  <script>
document.addEventListener("DOMContentLoaded", function() {
  var canvas = document.getElementById("canvas");
  var blockForm = document.getElementById("block-form");
  var addBlockButton = document.getElementById("add-block-button");

  var blocks = [];
  var connections = [];

  function createBlock(x, y) {
    var block = document.createElement("div");
    block.classList.add("block");
    block.style.left = x + "px";
    block.style.top = y + "px";

    block.addEventListener("mousedown", function(event) {
      event.preventDefault();
      selectBlock(block);
    });

    canvas.appendChild(block);

    blocks.push(block);

    return block;
  }

  function removeBlock(block) {
    var index = blocks.indexOf(block);
    if (index !== -1) {
      blocks.splice(index, 1);

      // Удаление связей, связанных с блоком
      connections = connections.filter(function(connection) {
        return connection.source !== block && connection.target !== block;
      });

      block.parentNode.removeChild(block);
    }
  }

  function selectBlock(block) {
    blocks.forEach(function(b) {
      b.classList.remove("selected");
    });

    block.classList.add("selected");
  }

  function createConnector(block, isSequential) {
    var connector = document.createElement("div");
    connector.classList.add("connector");
    if (isSequential) {
      connector.classList.add("sequential");
    } else {
      connector.classList.add("parallel");
    }

    connector.addEventListener("mousedown", function(event) {
      event.preventDefault();
      selectConnection(connector);
    });

    block.appendChild(connector);

    return connector;
  }

  function removeConnector(connector) {
    var index = connections.findIndex(function(connection) {
      return connector === connection.sourceConnector || connector === connection.targetConnector;
    });

    if (index !== -1) {
      connections.splice(index, 1);
      connector.parentNode.removeChild(connector);
    }
  }

  function selectConnection(connector) {
    connections.forEach(function(connection) {
      connection.sourceConnector.classList.remove("selected");
      connection.targetConnector.classList.remove("selected");
    });

    connector.classList.add("selected");
  }

  function createConnection(sourceBlock, sourceConnector, targetBlock, targetConnector) {
    var connection = {
      source: sourceBlock,
      sourceConnector: sourceConnector,
      target: targetBlock,
      targetConnector: targetConnector
    };

    connections.push(connection);
  }

  function updateConnections() {
    var canvasRect = canvas.getBoundingClientRect();

    connections.forEach(function(connection) {
      var sourceRect = connection.sourceConnector.getBoundingClientRect();
      var targetRect = connection.targetConnector.getBoundingClientRect();

      var sourceX = sourceRect.left - canvasRect.left + sourceRect.width / 2;
      var sourceY = sourceRect.top - canvasRect.top + sourceRect.height / 2;
      var targetX = targetRect.left - canvasRect.left + targetRect.width / 2;
      var targetY = targetRect.top - canvasRect.top + targetRect.height / 2;

      var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
      path.setAttribute("d", "M " + sourceX + " " + sourceY + " L " + targetX + " " + targetY);
      path.setAttribute("stroke", "#000");
      path.setAttribute("fill", "transparent");

      canvas.appendChild(path);
    });
  }

  addBlockButton.addEventListener("click", function() {
    var x = 100; // Начальные координаты для нового блока
    var y = 100;

    var block = createBlock(x, y);
    var connector = createConnector(block, true); // Коннектор для последовательной связи

    if (blocks.length > 0) {
      // Создание связи с последним блоком
      var lastBlock = blocks[blocks.length - 1];
      var lastConnector = lastBlock.getElementsByClassName("connector")[0];

      createConnection(lastBlock, lastConnector, block, connector);
    }

    selectBlock(block);
  });

  canvas.addEventListener("mousemove", function(event) {
    if (event.target.classList.contains("connector")) {
      event.target.style.cursor = "pointer";
    } else {
      event.target.style.cursor = "default";
    }
  });

  canvas.addEventListener("mouseup", function(event) {
    var sourceConnector = event.target;
    if (sourceConnector.classList.contains("connector")) {
      var sourceBlock = sourceConnector.parentNode;

      blocks.forEach(function(block) {
        if (block !== sourceBlock) {
          var connectors = block.getElementsByClassName("connector");

          for (var i = 0; i < connectors.length; i++) {
            if (sourceConnector.classList.contains("sequential")) {
              createConnection(sourceBlock, sourceConnector, block, connectors[i]);
            } else if (sourceConnector.classList.contains("parallel")) {
              createConnection(block, connectors[i], sourceBlock, sourceConnector);
            }
          }
        }
      });
    }

    updateConnections();
  });

  // Пример создания блока из формы
  blockForm.addEventListener("submit", function(event) {
    event.preventDefault();

    var blockType = document.getElementById("block-type").value;

    // Получение параметров блока из формы и создание блока
    var block = createBlock(200, 200);
    var connector = createConnector(block, true);

    if (blocks.length > 0) {
      var lastBlock = blocks[blocks.length - 1];
      var lastConnector = lastBlock.getElementsByClassName("connector")[0];

      createConnection(lastBlock, lastConnector, block, connector);
    }

    selectBlock(block);
  });
});

// Пример создания JSON-конфигурации
function createConfiguration() {
  var configuration = {
    blocks: [],
    connections: []
  };

  blocks.forEach(function(block) {
    var blockType = block.getAttribute("data-block-type");
    var x = parseFloat(block.style.left);
    var y = parseFloat(block.style.top);

    configuration.blocks.push({
      type: blockType,
      x: x,
      y: y
    });
  });

  connections.forEach(function(connection) {
    var source = blocks.indexOf(connection.source);
    var sourceConnector = Array.prototype.indexOf.call(connection.source.childNodes, connection.sourceConnector);
    var target = blocks.indexOf(connection.target);
    var targetConnector = Array.prototype.indexOf.call(connection.target.childNodes, connection.targetConnector);

    configuration.connections.push({
      source: source,
      sourceConnector: sourceConnector,
      target: target,
      targetConnector: targetConnector
    });
  });

  // Преобразование JSON-конфигурации в строку
  var jsonString = JSON.stringify(configuration);

  // Отправка формы или сохранение конфигурации в файл
}
</script>
</body>
</html>