Highlighted

Animate CC html5 canvas Dragging issue when test it in mobile

New Here ,
Feb 16, 2020

Copy link to clipboard

Copied

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=[];
}

 

TOPICS
Code, Error, How to, Other, Performance, Product issue, Tablet

Views

87

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animate CC html5 canvas Dragging issue when test it in mobile

New Here ,
Feb 16, 2020

Copy link to clipboard

Copied

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=[];
}

 

TOPICS
Code, Error, How to, Other, Performance, Product issue, Tablet

Views

88

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 16, 2020 0

Have something to add?

Join the conversation