Drag and Drop target with multiple objects..

[Moglie]

Let's say I have 3 (or more) draggable movie clips that can all be dropped on one target. I can position the mc on the target easy enough, but how could I offset each movieclips position on the _y so they'd line up neatly when dropped and not completely cover eachother with the exact coordinates?

[dawsonk]

stop();
var bars = [bar1, bar2, bar3];
//
function begDrag() {
	this.startDrag();
}
function endDrag() {
	stopDrag();
	if (this.hitTest(goalMC)) {
		this.at = goalMC;
	} else {
		this.at = this;
		this._x = this.sX;
		this._y = this.sY;
	}
	var yOff = goalMC._y;
	for (j in bars) {
		var aBar = bars[j];
		if (aBar.at == goalMC) {
			aBar._y = yOff;
			aBar._x = goalMC._x;
			yOff += aBar._height;
		}
	}
}
//
for (i in bars) {
	var myBar = bars[i];
	myBar.sX = myBar._x;
	myBar.sY = myBar._y;
	myBar.at = myBar;
	myBar.onPress = begDrag;
	myBar.onRelease = myBar.onReleaseOutside = endDrag;
}

[Moglie]

What I'm trying to do is fairly complicated...and not sure if I'll be able to pull it off. I have an interaction where there's several drag objects as well as drop targets. Some of the drop targets may have more than one drag object associated with it. I could write lots and lots of code to handle all this but trying to condense it. I'm working with this code so I can just call the function, pass some arguments and it's set. But I don't know how/if this can be modified to handle that additional functionality. Any ideas?

function dragSetup(clip, targ) {
	clip.onPress = function() {
		startDrag(this);
		this.beingDragged = true;
	};
	clip.onRelease = clip.onReleaseOutside=function () {
		stopDrag();
		this.beingDragged = false;
		if (eval(this._droptarget) == targ) {
			this.onTarget = true;
			trace("on targ");
		} else {
			this.onTarget = false;
			trace("not on targ");
		}
	};
	clip.myHomeX = clip._x;
	clip.myHomeY = clip._y;
	clip.myFinalX = targ._x;
	clip.myFinalY = targ._y;
	clip.onEnterFrame = function() {
		if (!this.beingDragged && !this.onTarget) {
			this._x -= (this._x-this.myHomeX)/5;
			this._y -= (this._y-this.myHomeY)/5;
		} else if (!this.beingDragged && this.onTarget) {
			this._x -= (this._x-this.myFinalX);
			this._y -= (this._y-this.myFinalY);
		}
	};
}

[dawsonk]

//
dragSetup(bar1, goal1);
dragSetup(bar2, goal1);
dragSetup(bar3, goal2);
dragSetup(bar4, goal2);
//
function dragSetup(clip, targ) {
	clip.targ = targ;
	if (clip.targ.stack == undefined) {
		clip.targ.stack = [];
	}
	maxDepth = (maxDepth == undefined) ? clip.getDepth() : Math.max(maxDepth, clip.getDepth());
	clip.onPress = function() {
		startDrag(this);
		this.beingDragged = true;
		this.swapDepths(maxDepth);
	};
	clip.onRelease = clip.onReleaseOutside = function () {
		stopDrag();
		this.beingDragged = false;
		this.yOff = 0;
		for (i in this.targ.stack) {
			if (this.targ.stack[i] == clip) {
				this.targ.stack.splice(i, 1);
			}
		}
		if (this.hitTest(this.targ)) {
			this.onTarget = true;
			this.targ.stack.push(this);
			trace("on targ");
		} else {
			this.onTarget = false;
			trace("not on targ");
		}
	};
	clip.myHomeX = clip._x;
	clip.myHomeY = clip._y;
	clip.myFinalX = targ._x;
	clip.myFinalY = targ._y;
	clip.onEnterFrame = function() {
		if (!this.beingDragged && !this.onTarget) {
			this._x -= (this._x - this.myHomeX) / 5;
			this._y -= (this._y - this.myHomeY) / 5;
		} else if (!this.beingDragged && this.onTarget) {
			for (i in this.targ.stack) {
				if (this.targ.stack[i] == this) {
					this.yOff = i;
				}
			}
			this.myFinalY = targ._y + (this.yOff * this._height);
			this._x -= (this._x - this.myFinalX) / 2;
			this._y -= (this._y - this.myFinalY) / 2;
		}
	};
}

[Moglie]

Thanks

[flashKitPoster]

Sorry to post to an old thread however I have a similar problem (has to be AS 2.0) and have found this post very useful. In my case I have multiple objects that can be dragged but also 2 or 3 "bins" they can be dropped into and I need them to stack into whatever bin they are dropped into to. If anyone could point me in the right direction it would be appreciated.

[Nig 13]

Here you go, I modified the code to have as many targets as you want in an array:

function dragSetup(clip, targ:Array) {
	clip.targ = targ;
	if (clip.targ.stack == undefined) {
		clip.targ.stack = [];
	}
	maxDepth = (maxDepth == undefined) ? clip.getDepth() : Math.max(maxDepth, clip.getDepth());
	clip.onPress = function() {
		startDrag(this);
		this.beingDragged = true;
		this.swapDepths(maxDepth);
	};
	clip.onRelease = clip.onReleaseOutside = function () {
		stopDrag();
		this.beingDragged = false;
		this.yOff = 0;
		for (i in this.targ.stack) {
			if (this.targ.stack[i] == clip) {
				this.targ.stack.splice(i, 1);
			}
		}
		for(i=0;i<clip.targ.length;i++){
			if (this.hitTest(this.targ[i])) {
				this.myTarget = this.targ[i];
				this.onTarget = true;
				this.targ.stack.push(this);
			}
		}
		if(!this.hitTest(this.myTarget)){
			this.onTarget = false;
		}
	};
	clip.myHomeX = clip._x;
	clip.myHomeY = clip._y;
	clip.onEnterFrame = function() {
		clip.myFinalX = this.myTarget._x;
		clip.myFinalY = this.myTarget._y;
		if (!this.beingDragged && !this.onTarget) {
			this._x -= (this._x - this.myHomeX) / 5;
			this._y -= (this._y - this.myHomeY) / 5;
		} else if (!this.beingDragged && this.onTarget) {
			for (i in this.targ.stack) {
				if (this.targ.stack[i] == this) {
					this.yOff = i;
				}
			}
			this.myFinalY = this.myTarget._y + (this.yOff * this._height);
			this._x -= (this._x - this.myFinalX) / 2;
			this._y -= (this._y - this.myFinalY) / 2;
		}
	};
}

To use the function, use this:

dragSetup(bin1, [bin2, bin3, bin4]);

The first parameter, bin1 is the movieclip you're going to drag, while the second parameter [bin2, bin3, bin4] is an array with all the movieclips you want as the targets.

Hope it helps

[flashKitPoster]

Great thanks! I had gotten something similar to work but your method should cut down on the amount of code I need to use.