Skip to main content
Participant
May 7, 2020 10:07 PM UTC
Question

adobe animate drag and drop simple code

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.  

This topic is closed to new replies. Start a new post to keep the conversation going.

15 replies

kglad
Community Expert
Community Expert
May 8, 2020 1:54 PM UTC

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

Translate
Inspiring
Apr 26, 2021 2:31 PM UTC

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

Translate
kglad
Community Expert
Community Expert
Apr 26, 2021 3:39 PM UTC

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

Translate