DataTransfer not existing

Data transfer is not existing in any event

by Jecs9

HTML

<div id="itemsList" class="toolContainer">
  <div class="toolGridContainer">
    <div class="containerTitle">Tool item container</div>
    <div class="containerSeparator">
      <hr>
    </div>
  </div>
</div>
<div id="dropContainer" class="dropContainer">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

CSS

.dropContainer{
  background-color: blue;
  height: 200px;
  width: 500px;
}

JavaScript

var getFileList = function (id){
	for (i = 0; i < 5; i++) {
  	var newElement = document.createElement('li');
    var newElementText = document.createTextNode('Item' + i);
    
    newElement.className = 'toolItem';
    newElement.appendChild(newElementText);
    
    $(newElement).draggable({
    	helper: 'clone',
    	cursor: 'dragging'
    });
    
    $(id).append(newElement);
 	}
}

//Drop area
$('#dropContainer').droppable({
		accept: '.toolItem',
		tolerance: 'pointer',

		drop: function(evt, ui){
			var canvasObj = document.createElement('canvas');
      canvasObj.className = 'droppedItem';
      
      var ctx = canvasObj.getContext('2d');
      ctx.beginPath();
			ctx.rect(20, 20, 10, 10);
			ctx.stroke();
      
      $(canvasObj).draggable().appendTo('#dropContainer');
    }
});

$(document).on('dragstart', '.toolItem', function(evt){
    var imgObj = document.createElement('img');
    imgObj.src = $(this).prop('id');
    evt.originalEvent.dataTransfer.setDragImage(imgObj, 0, 0);
});

getFileList('#itemsList');