drag n drop with a twist!

**bitterpill** · 08-30-2006, 04:23 PM

here's probably an easy one! im trying to make a puzzle.. say i have made 3 targets, and all of em needed an Apple in the target.. how do i code it so that any apple cud go into any of the targets? ive searched the forum for "drag and drop" and couldnt find what i was looking for..would be glad if sumone can spare some time!

**cintari** · 08-30-2006, 04:35 PM

i dont understand what you're asking

**bitterpill** · 08-30-2006, 04:37 PM

i have 3 objects, 2 apples and 1 orange. and ive made 3 "specific for each fruit" basket as (targets) so ive no problem assigning each item into its target. but, i need to code it so that ANY apple dragged, into any basket is able to work. because there are 2 apples, and 2 baskets. i only know how to code so that apple1 goes into basket1 and apple2 into basket2

(

how do i do that?

**Telmari** · 08-30-2006, 05:16 PM

Can you just use an "or" symbol (it looks like this:

Code:

||

) to on your drop target code so that if the apple drop target is basket 1 or basket 2, it is fine?

like,

Code:

if(eval(this._droptarget) == basket1_mc || eval(this._droptarget) == basket2_mc)
{
 //code goes here
}

that should work I think....

**bitterpill** · 08-30-2006, 05:19 PM

okie im trying that now and i'll post my fla if it doesnt/does work

**bitterpill** · 08-30-2006, 05:34 PM

hmm! not sure where to put this on my script.. here's the code and attached is the .fla

Code:

function dragItem(item, target) {
	item.onPress = function() {
		startDrag(this);
		this.beingDragged=true; 
	};
	item.onRelease = item.onReleaseOutside=function () {
		stopDrag();
		this.beingDragged=false; 
		if (eval(this._droptarget) == target) {
			this.onTarget = true;
		} else {
			this.onTarget = false;
		}
	};
	
	item.originX = item._x;
	item.originY = item._y;
	item.draggedX = target._x;
	item.draggedY = target._y;
	item.onEnterFrame = function() {
		if (!this.beingDragged && !this.onTarget) {
			this._x -= (this._x-this.originX)/5;
			this._y -= (this._y-this.originY)/5;
		} else if (!this.beingDragged && this.onTarget) {
			this._x -= (this._x-this.draggedX)/5;
			this._y -= (this._y-this.draggedY)/5;
		}
	};
}

dragItem(FApple1,apple1);
dragItem(FApple2,apple2);
dragItem(OrangeF1,Orange1);

{

**Telmari** · 08-30-2006, 05:50 PM

Ah I see - it would go in here:

Code:

function dragItem(item, target) {
	item.onPress = function() {
		startDrag(this);
		this.beingDragged=true; 
	};
	item.onRelease = item.onReleaseOutside=function () {
		stopDrag();
		this.beingDragged=false; 
		if (eval(this._droptarget) == target) {
			this.onTarget = true;
		} else {
			this.onTarget = false;
		}
	};

The thing is though, you're kind of enforcing a 1:1 relationship with your dragged mc and the target since you pass in both of these to the function.

In order to work around it, you'd either need to put this code directly on the mc itself so you could specify the drop targets specifically (as you need to have 2 drop targets for the apples, but only 1 for the orange), or for the apples you'd need to check for both the target you passed in, as well as the other 'basket' for a drop target as well.

Basically what I'm saying is that the code needs to be aware that it can check against 2 different drop targets instead of just the one you pass in.

In this case, I'd probably just stick the code onto the clip itself, rather than making it a function, since it's something you'd only call once anyways and since you obviously need to differentiate the two (apples vs oranges) codes a bit. That way on the apple code you can check for the two different baskets (use the code snippet I posted above) and the orange code can just check for one basket.

**bitterpill** · 08-30-2006, 05:55 PM

dis wouldnt work either?

Code:

// for apple
function dragItem2(item) {
	item.onPress = function() {
		startDrag(this);
		this.beingDragged=true; 
	};
	item.onRelease = item.onReleaseOutside=function () {
		stopDrag();
		this.beingDragged=false; 
		if (eval(this._droptarget) == apple1) || if (eval(this._droptarget) == apple2) {
			this.onTarget = true;
		} else {
			this.onTarget = false;
		}
	};

coz i think i'd like just all the script to be in the 1 frame

is that possible?

**Telmari** · 08-30-2006, 06:01 PM

True, that should work too (assuming you had the seperate sort of function dragItem1(item) for the orange)

**bitterpill** · 08-30-2006, 06:02 PM

it seems to not work though ... syntax error and unexpected "||" hmmm!

**Telmari** · 08-30-2006, 06:05 PM

Oh, get rid of the second 'if'... should be this:

Code:

if (eval(this._droptarget) == apple1) || (eval(this._droptarget) == apple2) {

not this

Code:

if (eval(this._droptarget) == apple1) || if (eval(this._droptarget) == apple2) {

**bitterpill** · 08-30-2006, 06:08 PM

**Error** Scene=Scene 1, layer=Layer 2, frame=1:Line 41: Unexpected '||' encountered
if (eval(this._droptarget) == apple1) || (eval(this._droptarget) == apple2) {

**Error** Scene=Scene 1, layer=Layer 2, frame=1:Line 43: 'else' encountered without matching 'if'
} else {

**Error** Scene=Scene 1, layer=Layer 2, frame=1:Line 46: Unexpected '}' encountered
};

dangit!

**bitterpill** · 08-30-2006, 06:10 PM

this is pretty crazy. i think i'd be needing to use array or var at this point yeah?

**Telmari** · 08-30-2006, 06:12 PM

Woops, my fault again. Try:

Code:

if (eval(this._droptarget) == apple1 || eval(this._droptarget) == apple2) {

Parenthesis problem.

**bitterpill** · 08-30-2006, 06:14 PM

oh ! let me try

**bitterpill** · 08-30-2006, 06:18 PM

Code:

function dragItem2(item2, target2) {
	item2.onPress = function() {
		startDrag(this);
		this.beingDragged=true; 
	};
	item2.onRelease = item2.onReleaseOutside=function () {
		stopDrag();
		this.beingDragged=false; 
		if (eval(this._droptarget) == apple1 || eval(this._droptarget) == apple2) {
			this.onTarget = true;
		} else {
			this.onTarget = false;
		}
	};
	
	item2.originX = item._x;
	item2.originY = item._y;
	item2.draggedX = target2._x;
	item2.draggedY = target2._y;
	item2.onEnterFrame = function() {
		if (!this.beingDragged && !this.onTarget) {
			this._x -= (this._x-this.originX)/5;
			this._y -= (this._y-this.originY)/5;
		} else if (!this.beingDragged && this.onTarget) {
			this._x -= (this._x-this.draggedX)/5;
			this._y -= (this._y-this.draggedY)/5;
		}

dragItem2(FApple1,apple1);
dragItem(FApple1,apple2);

my latest code still dont work, i think its the problem wif this part

Code:

	item2.draggedX = target2._x;
	item2.draggedY = target2._y;

coz the dragged coordinates is controlled by the target MCs.. so i dont think i can use the same script as the oranges for the apples.. hmmmm..

**bitterpill** · 08-30-2006, 07:10 PM

can anyone help me please? ive been trying different examples into mine but didnt work either

(((

**bitterpill** · 08-31-2006, 12:55 AM

Hi, ive made a huge update since the last time i posted here so hoping someone could lend me a hand coz i cant rectify what i done wrong in this code because ive been working this 12 hours nonstop and its driving be nuts for being such a newbie

(

problem is that now
a) the apple doesn't snap into the baskets coordinates
b) and only the first basket is recognized by both apples as shown in the trace message.

here's the code

Code:

function dragItem(item, target) {
	item.onPress = function() {
		startDrag(this);
		this.beingDragged=true; 
	};
	item.onRelease = item.onReleaseOutside=function () {
		stopDrag();
		this.beingDragged=false; 
		if (eval(this._droptarget) == target) {
			this.onTarget = true;
		} else {
			this.onTarget = false;
		}
	};
	
	item.originX = item._x;
	item.originY = item._y;
	item.draggedX = target._x;
	item.draggedY = target._y;
	item.onEnterFrame = function() {
		if (!this.beingDragged && !this.onTarget) {
			this._x -= (this._x-this.originX)/5;
			this._y -= (this._y-this.originY)/5;
		} else if (!this.beingDragged && this.onTarget) {
			this._x -= (this._x-this.draggedX)/5;
			this._y -= (this._y-this.draggedY)/5;
		}
	};
}

dragItem(OrangeF1,Orange1);

// for apple

var apples:Array = [FApple1, FApple2];
var baskets:Array = [apple1, apple2];
baskets1 = new Array(7, 11);
baskets2 = new Array(356, 18);

initializeAppleCoords = function(){
	for (var i = 0; i<apples.length; i++) {
		apples[i].initX = apples[i]._x;
		apples[i].initY = apples[i]._y;
	}
}

initializeAppleCoords();

dropApple = function(apples, baskets){
	apples._x = baskets._x;
	apples._y = baskets._y;
	trace("Apple got into Basket");
	stopDrag();
}

returnApple = function(apples){
	apples._x = apples.initX;
	apples._y = apples.initY;
	stopDrag();
}

for (var i = 0; i<apples.length; i++) {
	apples[i].onPress = function() {
		this.startDrag();
	};
	apples[i].onRelease = apples[i].onReleaseOutside=function () {
		for (var i = 0; i<baskets.length; i++) {
			if (this.hitTest(baskets[i])) {
				dropApple(this, baskets[i]);
			} else {
				returnApple(this);
			}
		}
	};
}

and the .fla attached

**bitterpill** · 08-31-2006, 01:15 AM

Anyone? :sigh:

**Will_learning** · 12-01-2006, 06:41 PM

Did you ever get any help with your problem? I was trying to figure out how to enlarge the hit area, but had no luck

Thread: drag n drop with a twist!

Thread Tools

Display

[F8] drag n drop with a twist!

Great update

drag and drop

Posting Permissions