body{
            background: #ccc;
        }
        [draggable="true"] {
            cursor: move;
        }
        .source img{
            height: 200px;
        }
        .block{
            min-height: 200px;
        }
        canvas{
            border: 1px solid red;
        }

const canvas = new fabric.Canvas('canvas');
       
        function handleDragStart(e) {
            e.dataTransfer.setData('text/plain',event.target.id)
        }
        function handleDragEnd(e) {

        }
        function handleDragEnter(e){
            // e.stopPropagation(); 

        }
        function handleDragOver(e){
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy'; 
            return false;
        }
        function handleDragLeave(e){
            // e.stopPropagation(); 
        }
        function handleDrop(e){
            e.stopPropagation(); 
            let id = e.dataTransfer.getData('text/plain');
            var img = document.querySelector('#'+id);
            var newImage = new fabric.Image(img, {
                width: img.width,
                height: img.height,
                // Set the center of the new object based on the event coordinates relative
                // to the canvas container.
                left: e.layerX,
                top: e.layerY
            });
            canvas.add(newImage);
            return false;
        }
        var images = document.querySelectorAll('#source img');
    [].forEach.call(images, function (img) {
            img.addEventListener('dragstart', handleDragStart, false);
            img.addEventListener('dragend', handleDragEnd, false);
        });

        var canvasContainer = document.getElementById('canvas-container');
        canvasContainer.addEventListener('dragenter', handleDragEnter, false);
        canvasContainer.addEventListener('dragover', handleDragOver, false);
        canvasContainer.addEventListener('dragleave', handleDragLeave, false);
        canvasContainer.addEventListener('drop', handleDrop, false);