# Snap to

**URL:** <https://forum.kirupa.com/t/snap-to/17705>\
**Category:** Uncategorized\
**Created:** [April 8, 2003, 1:23pm UTC](https://forum.kirupa.com/t/snap-to/17705 "2003-04-08T13:23:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![prankster](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@prankster](https://forum.kirupa.com/u/prankster)\
**Post date:** [April 8, 2003, 1:23pm UTC](https://forum.kirupa.com/t/snap-to/17705/1 "2003-04-08T13:23:49Z")

</div>

how can I make only selected draggable movie clips “snap to” a non-draggable movie clip? Can anyone help me out? thx.

Ⓜ

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 2:04pm UTC](https://forum.kirupa.com/t/snap-to/17705/2 "2003-04-08T14:04:44Z")

</div>

I can help you with the snap in, but… what do you mean “only selected draggable movie clips”?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 2:07pm UTC](https://forum.kirupa.com/t/snap-to/17705/3 "2003-04-08T14:07:45Z")

</div>

i have a bunch of draggable movie clips, but i only want a few to be able to snap in. But, I think it would be allright if all the movieclips could snap in. understand? thx.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 2:15pm UTC](https://forum.kirupa.com/t/snap-to/17705/4 "2003-04-08T14:15:48Z")

</div>

do you know how to do hit test?

If you do, you basically want to say "if the movie I am dragging is sitting somewhere near the target movie, make the registration point (movie.\_x) equal to the target registration point.

Does that make sense?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 3:12pm UTC](https://forum.kirupa.com/t/snap-to/17705/5 "2003-04-08T15:12:09Z")

</div>

make a function to get the distance between the movieclip you are dragging and the target clips… then once its small enuff snap them together…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 3:24pm UTC](https://forum.kirupa.com/t/snap-to/17705/6 "2003-04-08T15:24:19Z")

</div>

```auto

MovieClip.prototype.snap = function (x, y)
{
	w = this._x;
	z = this._y;
	xd = (x - w);
	yd = (y - z);
	hyp = Math.sqrt (xd * xd + yd * yd);
	return hyp;
};
mm.onPress = function ()
{
	this.startDrag (true);
	this.onEnterFrame = function ()
	{
		if (this.snap (_root.cc._x, _root.cc._y) <= 150)
		{
			this.stopDrag ();
			this._x = _root.cc._x;
			this._y = _root.cc._y;
		}
	};
};

```

thats what I came up with. I’m sure there is a better way tho…

mm is the name of the clip you are dragging and cc is the name of the target clip. 150 is the distance between them.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 4:55pm UTC](https://forum.kirupa.com/t/snap-to/17705/7 "2003-04-08T16:55:49Z")

</div>

_bumping up_

anybody want to try to make my code better?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 10:15pm UTC](https://forum.kirupa.com/t/snap-to/17705/8 "2003-04-08T22:15:34Z")

</div>

sorry. either im putting in the code wrong or the code dont work. on what should i put the code on? the target, the clip im draggin, or both? thanks

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 10:28pm UTC](https://forum.kirupa.com/t/snap-to/17705/9 "2003-04-08T22:28:09Z")

</div>

put that code in the main timeline, and name the draggable movieclip “mm” and the target movieclip “cc”

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 10:40pm UTC](https://forum.kirupa.com/t/snap-to/17705/10 "2003-04-08T22:40:48Z")

</div>

[AS]MovieClip.prototype.snap = function(x, y) {  
w = this.\_x;  
z = this.\_y;  
xd = (x-w);  
yd = (y-z);  
hyp = Math.sqrt(xd_xd+yd_yd);  
return hyp;  
};  
mm.onPress = function() {  
this.startDrag(true);  
};  
mm.onRelease = function() {  
if (this.snap(\_root.cc.\_x, \_root.cc.\_y)\<=150) {  
this.stopDrag();  
this.\_x = \_root.cc.\_x;  
this.\_y = \_root.cc.\_y;  
} else {  
stopDrag();  
}  
};[/AS]

That gives a snap to ONLY if when you release the clip it is within 150px from the other clip.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 8, 2003, 11:44pm UTC](https://forum.kirupa.com/t/snap-to/17705/11 "2003-04-08T23:44:41Z")

</div>

so… i got lostinbeta’s code to work but i cant drag the clip anywhere else without the clip snapping back to the target. how can i change it so there is only a specific radius where the clip will snap to the target and when it is pulled away from the radius, it will not snap back?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 1:23am UTC](https://forum.kirupa.com/t/snap-to/17705/12 "2003-04-09T01:23:15Z")

</div>

Im gonna smile… I just want to show that I wasnt crazy. I think this is a bit easier.

this assumes that you have two circles (your drag object (circle2) and your target object (circle1)). Also, the code is inside the movie clip circle2.

on(press){  
this.startdrag();

}  
on(release){

```
if(this.hitTest(_root.circle1)==true){
	
	this._x=_root.circle1._x;
	this._y=_root.circle1._y;
}
this.stopdrag();

```

}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 1:31am UTC](https://forum.kirupa.com/t/snap-to/17705/13 "2003-04-09T01:31:48Z")

</div>

In keeping with the spirit of MX…

cirlce2.onPress=function(){  
this.startdrag();  
}

circle2.onRelease=function(){

if(this.hitTest(\_root.circle1)==true){

this.\_x=\_root.circle1.\_x;  
this.\_y=\_root.circle1.\_y;  
}  
this.stopdrag();  
}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 1:58am UTC](https://forum.kirupa.com/t/snap-to/17705/14 "2003-04-09T01:58:21Z")

</div>

yes that would work and its a bit less code but if you use prototype it helps to reduce the code if you are using it on more than one or two instances…

say you had 15 circles and 15 targets… you would have to write that code 15 times instead of

circle1.snap()  
circle2.snap()  
circle3.snap()  
…etc…etc…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 2:03am UTC](https://forum.kirupa.com/t/snap-to/17705/15 "2003-04-09T02:03:24Z")

</div>

Umm… Jubba… It’s me. hehehe… I agree with the use of prototype. I even agree with that proximity thing you guys put together. The intent was to show there was an easier approach.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 2:07am UTC](https://forum.kirupa.com/t/snap-to/17705/16 "2003-04-09T02:07:46Z")

</div>

oh, I figured that you’d agree, but I was just attempting to demonstrate the power of prototypes. Just different approaches reaching the same objectetive. You take the high road and I’ll take the low road… 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 2:55am UTC](https://forum.kirupa.com/t/snap-to/17705/17 "2003-04-09T02:55:45Z")

</div>

Hey, you know me! Happy-Go-Lucky! hehehe… We’re on the same page.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 3:09am UTC](https://forum.kirupa.com/t/snap-to/17705/18 "2003-04-09T03:09:53Z")

</div>

> \*Originally posted by prankster \*  
> \*\*so… i got lostinbeta’s code to work but i cant drag the clip anywhere else without the clip snapping back to the target. how can i change it so there is only a specific radius where the clip will snap to the target and when it is pulled away from the radius, it will not snap back? \*\*

That problem never occured for me with my method :-\ If I drug the clip out of the radius of the other clip, then it worked just fine dropping it wherever I wanted.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 12:06pm UTC](https://forum.kirupa.com/t/snap-to/17705/19 "2003-04-09T12:06:11Z")

</div>

> \*Originally posted by Jubba \*  
> \*\*yes that would work and its a bit less code but if you use prototype it helps to reduce the code if you are using it on more than one or two instances…

say you had 15 circles and 15 targets… you would have to write that code 15 times instead of

circle1.snap()  
circle2.snap()  
circle3.snap()  
…etc…etc… \*\*  
Nope, that’s not true. First of all because your snap prototype doesn’t handle the actual snap: it returns the distance. The snap is done in the onRelease, just like Inigo’s method.  
Second thing, Inigo’s method could very well be “prototyped” 🙂

pom :rd:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 9, 2003, 1:18pm UTC](https://forum.kirupa.com/t/snap-to/17705/20 "2003-04-09T13:18:50Z")

</div>

right I realized that after I wrote that but the snap could be easily prototyped as well.