Drag and Drop

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrastar e Soltar com Bootstrap e TinyMCE</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<style>
  .sidebar {
    width: 200px;
    height: 100%;
    background-color: #f0f0f0;
    float: right;
    padding: 20px;
  }
  .draggable {
    cursor: move;
    margin-bottom: 10px;
    display: block;
  }
  .content {
    padding: 20px;
    min-height: 300px;
    position: relative;
  }
  .dropzone {
    min-height: 50px;
    border: 2px dashed #aaa;
    margin-bottom: 20px;
    position: relative;
  }
  .highlight {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px dashed #007bff;
    z-index: 1;
    display: none;
  }
  .dropzone:hover .highlight {
    display: block;
  }
  .delete-button {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    display: none;
  }
  .alert:hover .delete-button {
    display: block;
  }
  .red-button {
    position: absolute;
    top: 5px;
    right: 35px;
    cursor: pointer;
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    display: none;
  }
  .alert:hover .red-button {
    display: block;
  }
  .duplicate-button {
    position: absolute;
    top: -30px;
    right: 5px;
    cursor: pointer;
    background-color: green;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    display: none;
    z-index: 1;
  }
  .alert:hover .duplicate-button {
    display: block;
  }
</style>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 sidebar">
      <button class="btn btn-secondary draggable mt-2" draggable="true" ondragstart="drag(event, 'menu')">
        <img src="https://via.placeholder.com/20" alt="Menu Icon"> Menu
      </button>
      <button class="btn btn-secondary draggable mt-2" draggable="true" ondragstart="drag(event, 'header')">
        <img src="https://via.placeholder.com/20" alt="Header Icon"> Header
      </button>
      <button class="btn btn-secondary draggable mt-2" draggable="true" ondragstart="drag(event, 'content')">
        <img src="https://via.placeholder.com/20" alt="Content Icon"> Content
      </button>
      <button class="btn btn-secondary draggable mt-2" draggable="true" ondragstart="drag(event, 'footer')">
        <img src="https://via.placeholder.com/20" alt="Footer Icon"> Footer
      </button>
    </div>
    <div class="col-md-9">
      <div class="content" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div class="dropzone">
          <div class="highlight"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
async function drop(event) {
    event.preventDefault();
    var type = event.dataTransfer.getData("text");
    var content = "";

      template = {
        "menu": './assets/img/block/content/content-1.html',
        "header": './assets/img/block/content/content-2.html',
        "content": './assets/img/block/content/content-3.html',
        "footer": './assets/img/block/content/content-4.html'
    }

    content = await loadHtmlFile(template[type]);


}

function duplicateBlock(originalBlock) {
  var newBlock = originalBlock.cloneNode(true);
  var deleteButton = newBlock.querySelector('.delete-button');
  deleteButton.onclick = function() {
    if (confirm("Tem certeza que deseja deletar este bloco?")) {
      newBlock.remove();
    }
  };
  var redButton = newBlock.querySelector('.red-button');
  redButton.onclick = function() {
    if (confirm("Tem certeza que deseja deletar este bloco?")) {
      newBlock.remove();
    }
  };
  document.querySelector('.content').appendChild(newBlock);
}
</script>

</body>
</html>