AS3 return dropped object to initial location - actionscript-3

Question

I am using codes from http://hub.tutsplus.com/tutorials/create-a-drag-and-drop-puzzle-in-actionscript-30--active-2920 to make a drag and drop decoration game. I am trying to make it so that when the dropped object is dragged out of target location (which is an outline of the shape in my case), it goes back to initial location... basically reversing the drag and drop. I've been messing around with really random codes and so far this line is the closest to what I want but I don't think the code is right and also it doesnt return to initial location, it just goes to the side of the stage.
so, I added the else if line to stopDragObject which got the object to be removed from target location, but it randomly goes to the side of the stage, and not initial location:
private function stopDragObject(evt:MouseEvent):void {
if (evt.target.hitTestObject(getChildByName(evt.target.name + "Target"))) {
evt.target.x = getChildByName(evt.target.name + "Target").x;
evt.target.y = getChildByName(evt.target.name + "Target").y;
} else if (evt.target.x = null) {
evt.target.x = xPos;
evt.target.y = yPos;
}
evt.target.stopDrag();
}
Solved
after reading the lesson from below, I ended up with this and it works perfectly! (not exactly the way like the lesson but at least it works...)
private function stopDragObject(evt:MouseEvent):void {
if (evt.target.hitTestObject(getChildByName(evt.target.name + "Target"))) {
evt.target.x = getChildByName(evt.target.name + "Target").x;
evt.target.y = getChildByName(evt.target.name + "Target").y;
} else {
evt.target.x = getChildByName(evt.target.name + "Int").x;
evt.target.y = getChildByName(evt.target.name + "Int").y;
}
evt.target.stopDrag();
}
I added a initial object so the object could only be either at target or initial :)

Answer 1

I will try to teach neither provide code.
Lets draw two rectangles:
var s1:Sprite = new Sprite()
var s2:Sprite = new Sprite()
with (s1)
{
graphics.beginFill(0xfcaaaa, .7)
graphics.drawRect(0, 0, 400, 400)
graphics.endFill()
}
with (s2)
{
graphics.beginFill(0x00aaaa, .7)
graphics.drawRect(0, 0, 30, 30)
graphics.endFill()
}
addChild(s1)
addChild(s2)
Is't that simple? You see that s1 is much bigger than s2 (dimentions: 400, 400 vs 30, 30 ) Now place s2 to the center of our big s1:
s2.x = 200;
s2.y = 200;
We will use s1 for the boundaries of s2 movings.
This code is a simplest solution for dragging our s2 rectangle (Sprite):
s2.addEventListener(MouseEvent.MOUSE_DOWN, onDown)
s2.addEventListener(MouseEvent.MOUSE_UP, onUp)
function onDown(e:MouseEvent):void
{
(e.currentTarget as Sprite).startDrag();
}
function onUp(e:MouseEvent):void
{
(e.currentTarget as Sprite).stopDrag();
}
Now, the basic solution for returning our Sprite to the starting position: hitTestObject will return true, if Sprite s2 is still located in the area of Sprite s1. More helpful functions here. Lets check it. Change onUp function this way:
function onUp(e:MouseEvent):void
{
var s:Sprite = (e.currentTarget as Sprite);
s.stopDrag();
if (!s.hitTestObject(s1))
{
s.x = 200;
s.y = 200;
}
}
You see that now s2 gets returned to the starting position if it gets dragged out from the area of s1.
Now the main part:
What to do, if you can't predict the starting position of the object? Now, when we know how to deal with already known coordinates, this is the challange. I assume that there are several implementations of this functionality exist. One of the best way is to set additional parameters e.g. startingX and startingY for the dragging object when starting drag. E.g. in our example when onDown function gets called. I guess you dealing with Sprites or MovieClips and don't have the ability to do this.
Lets go another way and use Dictionary object. Dictionary is some kind of traditional Hash Map with the ability to use objects as keys.
Hash map is kind of storage, where you can put any value mapped by a key, provided by you. In actionscript 3 we have Object as a limited implementation of Hash Map. Why use it? In two words because it's simple and fast. But with Object we can't use other Objects as keys, only strings ints numbers etc..
var sites:Object = new Object();
sites['stackoverflow'] = "http://stackoverflow.com/"
trace(sites.stackoverflow) // outputs-> http://stackoverflow.com/
With Dictionary we can use Objects as keys.
Lets create it:
var startCoordinates:Dictionary = new Dictionary();
To save coordinates, we need x and y property.
FYI: new Object() is equivalent of {}
var capitals:Object = new Object();
capitals['Italy'] = 'Rome';
is equivalent of
var capitals:Object = {Italy: 'Rome'};
To save current position we will use this code:
var s:Sprite = (e.currentTarget as Sprite);
startCoordinates[s] = { x: s.x, y: s.y };
And the whole code in our example will look like this:
var s1:Sprite = new Sprite()
var s2:Sprite = new Sprite()
addChild(s1)
addChild(s2)
with (s1)
{
graphics.beginFill(0xfcaaaa, .7)
graphics.drawRect(0, 0, 400, 400)
graphics.endFill()
}
with (s2)
{
graphics.beginFill(0x00aaaa, .7)
graphics.drawRect(0, 0, 30, 30)
graphics.endFill()
}
s2.x = 200;
s2.y = 200;
s2.addEventListener(MouseEvent.MOUSE_DOWN, onDown)
s2.addEventListener(MouseEvent.MOUSE_UP, onUp)
var startCoordinates:Dictionary = new Dictionary()
function onDown(e:MouseEvent):void
{
var s:Sprite = (e.currentTarget as Sprite);
startCoordinates[s] = { x: s.x, y: s.y };
s.startDrag();
}
function onUp(e:MouseEvent):void
{
var s:Sprite = (e.currentTarget as Sprite);
s.stopDrag();
if (!s.hitTestObject(s1))
{
s.x = startCoordinates[s].x;
s.y = startCoordinates[s].y;
}
delete startCoordinates[s];
}