Drag drop issue on Mobile Devices

Question

Now, I have developed web application using KonvaJS for drag-drop which can be used by mobile devices as well by following the example in W3School.
So far, it works in both desktop mode and mobile device mode using Mozilla Firefox. However, it does not work in mobile device mode using Google Chrome browser. Here is the code in question.

var width = 300; var height = 400;
var stage = new Konva.Stage({
container: 'MyCanvas',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
// draw into dynacmic canvas element
var PaintCanvas = document.createElement('canvas'); // need to perform flood fill or paint by create canvas outside drag drop mechanic
var PaintContext = PaintCanvas.getContext('2d');
var activeBool = false;
 
var itemURL = '';
var isMobile = false; //initiate as false
// device detection
    if(/Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
        isMobile = true;
    }
    var ImageDirectoryElement = document.getElementById('ImageDirectory'); // the place to show image files in the directory

if(!isMobile)
{
    ImageDirectoryElement.addEventListener("dragstart", dragStart, false);
}
else if(isMobile) {
    ImageDirectoryElement.addEventListener("touchstart", dragStart, false); // so far, it response to touchstart 
}
function dragStart(e)
{
//when the drag starts
itemURL = e.target.src;

if (e.target !== stage) { //if user is dragging circle
activeBool = true; //the drag is active
}

}

var con = stage.container();
 
if(!isMobile)
{
    con.addEventListener("dragover", drag, false);
} else if(isMobile) {
    con.addEventListener("touchmove", drag, false); // however, it failed to response to touchmove 
}
function drag(e)
{
if (activeBool) { //if the drag is active
e.preventDefault(); //the user cant do anything else but drag
}
}
 
if(!isMobile)
{
    con.addEventListener("drop", dragEnd, false);
} else if(isMobile) {
    con.addEventListener("touchend", dragEnd, false);
}
function dragEnd(e)
{
e.preventDefault();
stage.setPointersPositions(e);
var ImageDragDrop = new Image();
PaintCanvas.width = ImageDragDrop.width;
PaintCanvas.height = ImageDragDrop.height;



var ImageCanvasWidth = ImageDragDrop.width;
var ImageCanvasHeight = ImageDragDrop.height;
var ImageCanvasWidthHeightRatio = ImageCanvasWidth/ImageCanvasHeight;
PaintContext.fillStyle = BrushColorString;
PaintContext.strokeStyle = BrushColorString;
PaintContext.lineJoin = "round";
PaintContext.lineCap = "round";
PaintContext.lineWidth = BrushRadius;
PaintContext.shadowBlur = BrushRadius;
PaintContext.shadowColor = BrushColorString;
PaintContext.drawImage(ImageDragDrop, 0, 0);
var image = new Konva.Image({
name: 'FaceImg',
src: itemURL,
id: 'Image' + ImageNumber,
image: PaintCanvas,
draggable: false, // may need to make automatic scaling

});
ImageID = ImageID + ImageNumber;
ImageNumber1 = ImageNumber;
ImageNumber = ImageNumber+1;
ImageID = 'Image';
image.cache();
image.filters([Konva.Filters.Contrast,Konva.Filters.Brighten]);
// the rest are the way to define the top-left position along with the sizes of
// Konva.Image element to maker automatic positioning.

....
}

If you could come up with solution to deal with drag drop behaviors in different browsers, please show me your resolution that really work though.