Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
25 days ago

Using JavaScript, how can I create a drag and drop template?

How can I prevent a dragged block from being removed from the left container, allowing the user to drag and drop it multiple times? One approach is to create a set of draggable blocks in the left container using checkboxes that allow the user to drag and drop the same block multiple times without removing it from the left container. To achieve this, modify the code by replacing the div elements in the #blocks container with input elements with type checkbox. Use the same name attribute for all checkboxes and set the draggable attribute to true. Here's an example: 

Test Block 1 H1
Test Block 1 H2
Test Block 1 H3
Test Block 1 button
This way, the user can drag and drop any of the checkbox elements from the left container multiple times without removing them from the container.
Answers(2)
avatar
Vogi
22 days ago
Verified Answer
You can prevent a dragged block from being removed from the left container by creating a set of draggable blocks in the left container using checkboxes that allow the user to drag and drop the same block multiple times without removing it from the left container. To achieve this, modify the code by replacing the div elements in the #blocks container with input elements with type checkbox. Use the same name attribute for all checkboxes and set the draggable attribute to true. Here's an example: 
<input type="checkbox" name="draggableBlock" value="1" draggable="true" class="block" data-block="1">Test Block 1 H1</input>
<input type="checkbox" name="draggableBlock" value="2" draggable="true" class="block" data-block="2">Test Block 1 H2</input>
<input type="checkbox" name="draggableBlock" value="3" draggable="true" class="block" data-block="3">Test Block 1 H3</input>
<input type="checkbox" name="draggableBlock" value="4" draggable="true" class="block" data-block="4">Test Block 1 button</input>
This way, the user can drag and drop any of the checkbox elements from the left container multiple times without removing them from the container. Does this help? Let me know if you have any other questions.
avatar
Tolerim
25 days ago
To prevent the blocks from being removed from the left container after dragging to the right container, you need to remove the line document.right.appendChild(document.draggable) from the if statement in the dragover event listener: 
document.right.addEventListener('dragover', (e) => {
  e.preventDefault();
  document.draggables = blocks.getElementsByClassName("block");
  document.draggable = document.querySelector('.dragging');
  const afterElement = getDragAfterElement(document.right, e.clientY);
  if (afterElement == null) {
    // id = document.draggable.getAttribute('data-block'); // Remove this line
    // document.draggable.innerHTML = blocksData[id - 1].htmlContent; // Remove this line
    // document.right.appendChild(document.draggable); // Remove this line
  } else {
    document.right.insertBefore(document.draggable, afterElement);
  }
});
This will ensure that the blocks remain in the left container after dragging to the right container, and can be dragged and dropped multiple times.
;