adobe animate drag and drop simple code

[n3214]

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.  

[kglad]

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

[mp63178988]

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

[kglad]

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

[mp63178988]

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

[tjlinzy]

Wow!!!  Thanks for this.  I was looking for coding to make a drag and drop game and this worked for me.  The only tweek I would like to make to it is to get the pieces to snap into place.  

This has been very helpful, thank you very much. 

[kglad]

use the code i suggested.

[tjlinzy]

Hi kglad, 

First of all, thank you for your quick response.  You've been a great help to me so please know that I value your input.  With that said, I tried your solution first, but all I got was the preloader.  I admit that I am not the brilliant coder that you are...by no  means.  But this is what I did:

1. I created a new canvas file, and changed the Publish Settings to make it responsive and etc. 

2. Then I created 4 movie clips, named them p1, p2, s1, s2., and gave them the same instance names. 

Thank you for any assistance, 

Terri

[tjlinzy]

Duh...I think that I am missing the opening code.  Can you help me with that?  

I admit, outside of Code Snippets, I am lost.  My strength is in the design process.       

Embarassed and humble, 

Terri

[tjlinzy]

No, I didn't . Please disregard. Thnx!

[kglad]

i'm not sure where you're at in this process.  is everything working the way you want?

[tjlinzy]

Hello, no. Nothing is working for me.  I am at the very beginning of the project so there was no coding done.  

The only thing I did was what was explained earlier. 

Presently, the only things on the stage are 4 movie clips named as they arein the coding;  p1, p2 and s1, s2.  I understand that p1 and p2 are names of  the puzzle piece to be dragged to the targets s1, and s2.  Isn't that correct?

I get stuck after that because I copied and pasted the code you provided. 

Thanks so much for your desire to help me, 

Terri

[tjlinzy]

and...each movie clip has an instance name to match the puzzle piece name. 

Thanks

[tjlinzy]

Mr. kglad, 

I figured it out and it is embarassing.  I literally copied the coding exactly as you typed it. 

After walking away from it, I realized that I neglected to delete the extra commas and periods ([this.p1, this.p2,...])

Thanks again for posting the code.  You are really appreciated. 

Regards

[kglad]

you're welcome.

[CodeDeveloperOM]

You can benefit from here

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/drag_and_drop_game

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/as3