adobe animate drag and drop simple code

New Here ,
May 07, 2020 May 07, 2020

Copy link to clipboard

Copied

Creating a jigsaw puzzle like drag and drop game on Adobe Animate. Created it in action script 3.0 without any problems but am now trying to creat it in HTML5 and am struggling with the code. 

Does anyone have a code snippet or some simple code to create the drag and drop.  

TOPICS
New user

Views

362

Likes

translate

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
community guidelines
Adobe Community Professional ,
May 08, 2020 May 08, 2020

Copy link to clipboard

Copied

var puzzlepieces = [this.p1, this.p2,...];
var dropspots = [this.s1, this.s2,...];
var startA = [];
var startDrag = startDragF.bind(this);


for(var i=0;i<puzzlepieces.length;i++){
startA[i] = [puzzlepieces[i].x, puzzlepieces[i].y];
puzzlepieces[i].addEventListener("pressmove", startDrag);
puzzlepieces[i].addEventListener("pressup", stopDragF.bind(this));
}

function startDragF(e){
var p = stage.globalToLocal(e.stageX, e.stageY);
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;
}
function stopDragF(e){
var i = puzzlepieces.indexOf(e.currentTarget);
var pt = e.currentTarget.localToLocal(0, 0, dropspots[i]);
if (dropspots[i].hitTest(pt.x, pt.y)) {
e.currentTarget.x = dropspots[i].x;
e.currentTarget.y = dropspots[i].y;
e.currentTarget.removeEventListener("pressmove", startDrag);
} else {
e.currentTarget.x = startA[i][0];
e.currentTarget.y = startA[i][1];
}
}

Likes

translate

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
community guidelines
Explorer ,
Apr 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

Hello,
Is it possible to modify this code so that the mouse does not automatically center on the moved occurrence?
Thanks in advance.

Likes

translate

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
community guidelines
Adobe Community Professional ,
Apr 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

yes, define an offset (between e.currentTarget.x,e.currentTarget.y and p.x,p.y) in startDrag.

Likes

translate

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
community guidelines
Explorer ,
Apr 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

I recorded the position of the mouse at the time of the click by creating a mousedown. I don't know if it's possible to make it simpler but it works.

var puzzlepieces = [this.p1, this.p2];
var dropspots = [this.s1, this.s2, ];
var startA = [];
var startDrag = startDragF.bind(this);


for (var i = 0; i < puzzlepieces.length; i++) {
	startA[i] = [puzzlepieces[i].x, puzzlepieces[i].y];
	puzzlepieces[i].addEventListener("mousedown", startMouseDown.bind(this))
	puzzlepieces[i].addEventListener("pressmove", startDrag);
	puzzlepieces[i].addEventListener("pressup", stopDragF.bind(this));
}

var differenceX;
var differenceY;

function startMouseDown(e) {
	var pt = stage.globalToLocal(e.stageX, e.stageY);
	differenceX = (e.currentTarget.x - pt.x);
	differenceY = (e.currentTarget.y - pt.y);
}

function startDragF(e) {
	var p = stage.globalToLocal(e.stageX, e.stageY);
	e.currentTarget.x = p.x + differenceX;
	e.currentTarget.y = p.y + differenceY;
}


function stopDragF(e) {
	var i = puzzlepieces.indexOf(e.currentTarget);
	var pt = e.currentTarget.localToLocal(0, 0, dropspots[i]);
	if (dropspots[i].hitTest(pt.x, pt.y)) {
		e.currentTarget.x = dropspots[i].x;
		e.currentTarget.y = dropspots[i].y;
		e.currentTarget.removeEventListener("pressmove", startDrag);
	} else {
		e.currentTarget.x = startA[i][0];
		e.currentTarget.y = startA[i][1];
	}
}

Likes

translate

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
community guidelines
Contributor ,
Apr 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

Likes

translate

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
community guidelines