Skip to main content
Participant
May 7, 2020
Question

adobe animate drag and drop simple code

  • May 7, 2020
  • 2 replies
  • 3072 views

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 has been closed for replies.

2 replies

kglad
Community Expert
Community Expert
May 8, 2020

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

Inspiring
April 26, 2021

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

kglad
Community Expert
Community Expert
April 26, 2021

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