Animate CC html5 canvas Dragging issue when test it in mobile

Report · Feb 16, 2020

Hi

I'm making a mobile web app that has drag and drop. I made it and it works well on pc browsers but when I test it on mobile it not works. you can check it from the following address:

https://globalwdf.000webhostapp.com/html5Works/HTML5_language_lessons/en/en_unit1_html5_Exercises.ht...

I hope someone knows why this happening?

I use the following codes for drag and drop:

//=== first three drag&drop ===
answer1_1_1.on("pressmove", function (evt){ pressM(evt); });
answer1_1_1.on("pressup", function (evt){ pressU(evt,tripleArr);});

answer1_1_2.on("pressmove", function (evt){ pressM(evt); });
answer1_1_2.on("pressup", function (evt){ pressU(evt,tripleArr);});

answer1_1_3.on("pressmove", function (evt){ pressM(evt); });
answer1_1_3.on("pressup", function (evt){ pressU(evt,tripleArr);});

//=== second three drag&drop ===

answer1_1_4.on("pressmove", function (evt){ pressM(evt); });
answer1_1_4.on("pressup", function (evt){ pressU(evt,tripleArr2);});

answer1_1_5.on("pressmove", function (evt){ pressM(evt); });
answer1_1_5.on("pressup", function (evt){ pressU(evt,tripleArr2);});

answer1_1_6.on("pressmove", function (evt){ pressM(evt); });
answer1_1_6.on("pressup", function (evt){ pressU(evt,tripleArr2);});

//=== third three drag&drop ===
answer1_1_7.on("pressmove", function (evt){ pressM(evt); });
answer1_1_7.on("pressup", function (evt){ pressU(evt,tripleArr3);});

answer1_1_8.on("pressmove", function (evt){ pressM(evt); });
answer1_1_8.on("pressup", function (evt){ pressU(evt,tripleArr3);});

answer1_1_9.on("pressmove", function (evt){ pressM(evt); });
answer1_1_9.on("pressup", function (evt){ pressU(evt,tripleArr3);});

firstPlaceArr=[];
function pressM(evt)
{	
	var p = evt.currentTarget.parent.globalToLocal(evt.stageX, evt.stageY);
	
	if(firstPlaceArr.length==0)
	{
		firstPlaceArr=[evt.currentTarget.x,evt.currentTarget.y];
		console.log(tripleArr);	
	}	
	
	if(mpAr[0]==0){mpAr = [p.x - evt.currentTarget.x  , p.y - evt.currentTarget.y];}//correct place of draging
	dragStage1.setChildIndex(evt.currentTarget, dragStage1.getNumChildren()-1);
	evt.currentTarget.x = p.x - mpAr[0];
	evt.currentTarget.y = p.y - mpAr[1];
	stage.update();	
}

function pressU(evt,arr,yy)
{			
	mpAr = [0,0];
	
	var placed=false;
	//check is it above placing space
	for(var i=0;i<3;i++)
	{		
		if(evt.currentTarget!=arr[i] && intersect(arr[i]))
		{			
			//=== swap with tween ===
			createjs.Tween.get(evt.currentTarget).to({x:arr[i].x,y:arr[i].y}, 350);
			createjs.Tween.get(arr[i+3]).to({x:firstPlaceArr[0],y:firstPlaceArr[1]}, 350);
			
			//=== swap drag movieclips in array ===
			arr[arr.indexOf(evt.currentTarget)]=arr[i+3];
			arr[i+3]=evt.currentTarget;
			stage.update(evt);
			placed=true;
		}
	}
	
	if(placed==false){evt.currentTarget.x = firstPlaceArr[0]; evt.currentTarget.y = firstPlaceArr[1];}
	
	firstPlaceArr=[];
}

Report · Nov 18, 2020

I have the same problem. I drag a clip onto the stage. It works fine in a PC browser but not in an Android or iPad browser.
Thanks for your help.