just set draggable=true

<div class="d-flex align-items-center mb-3" draggable=true>



 <div class="canvas" id="canvas" ondrop="onDrop(event)" ondragover="onDragOver(event)"></div>

function onDrop(event) {



======================= Prevent default (using onDragOver method) ========================================

  <canvas id="orangeCanvas" ondrop="onDrop(event)"  ondragover="onDragOver(event)"></canvas>

     // Function to allow drop in the target container
    function onDragOver(event) {
      event.preventDefault();
    }

 // Function to handle drag start event
    function dragStart(event) {
      event.dataTransfer.setData("text/plain", event.target.id);
    }


 // Attach drag event listeners to draggable elements
    const draggableElements = document.querySelectorAll('.draggable-element');
    draggableElements.forEach((element) => {
      element.addEventListener('dragstart', dragStart);
    });