移动设备上的拖放问题

问题描述

现在，我已经开发了使用 KonvaJS 进行拖放操作的 Web 应用程序，移动设备也可以按照 W3School 中的示例进行操作。
到目前为止，它可以使用 Mozilla Firefox 在桌面模式和移动设备模式下工作。但是，它在使用 Google Chrome 浏览器的移动设备模式下不起作用。这是有问题的代码。

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",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",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",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);
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.

....
}

如果您能想出解决不同浏览器中拖放行为的解决方案，请告诉我您的解决方案确实有效。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）