Looking to snap object, only when object is close enough

Question

SO this may be an easy solution, but I can't seem to figure it out myself. What I am doing, is creating a drag n drop game, and it's all well and beautiful, but if you let go of the piece too early, it automatically snaps to the nearest available location (based on positions I have in an array to choose from). I'm really looking for it only to snap if it's say within the confines of the movieclip it's over, or if it's within a 20px radius of a movieclip. Hope you guys can help me! It is inititated on a mouseUp event.

Code:

var dragArray:Array = [it_1, it_2, it_3, it_4, it_5, it_6, it_7, it_8, it_9];
var matchArray:Array = [mat_1, mat_2, mat_3, mat_4, mat_5, mat_6, mat_7, mat_8, mat_9]
var placeArray:Array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
// points to snap to
var pointList:Array = new Array();
pointList.push(new Point(mat_1.x, mat_1.y));
pointList.push(new Point(mat_2.x, mat_2.y));
pointList.push(new Point(mat_3.x, mat_3.y));
pointList.push(new Point(mat_4.x, mat_4.y));
pointList.push(new Point(mat_5.x, mat_5.y));
pointList.push(new Point(mat_6.x, mat_6.y));
pointList.push(new Point(mat_7.x, mat_7.y));
pointList.push(new Point(mat_8.x, mat_8.y));
pointList.push(new Point(mat_9.x, mat_9.y));
////where points are placed after being snapped to
var spliced:Array= new Array();

function SnapEvent(event:MouseEvent) {

 //// the clip we're dragging////
var referencePoint:Point = new Point(currentClip.x, currentClip.y);
var resultPoints:Array = PointTester.findClosest(referencePoint, pointList, 1);

////returns nearest "mat" and snaps current clip to it////
for each(var result:Object in resultPoints) {
//trace("Point is at:", result.point.x, ", ", result.point.y, " that's ", result.distance, " units away");
        currentClip.x=result.point.x;
        currentClip.y=result.point.y;
        var posOfMat:int = pointList.indexOf(result.point);
        trace("index: "+pointList[posOfMat]);
        spliced.push(pointList[posOfMat]);
        pointList.splice(posOfMat,1);
        //trace("spliced: "+spliced);
        trace("length: "+pointList.length); 
        }
        //trace("result: "+result.point);
        trace("full spliced: "+spliced.length);
}

Answer 1

Inside the for each loop you can check to see whether or not the result point's distance is less than 20 pixels, and only snap the current clip to the result point if it is. Here's an example:

...

function SnapEvent(event:MouseEvent) {

    //// the clip we're dragging////
    var referencePoint:Point = new Point(currentClip.x, currentClip.y);
    var resultPoints:Array = PointTester.findClosest(referencePoint, pointList, 1);

    ////returns nearest "mat" and snaps current clip to it////
    for each(var result:Object in resultPoints) {
        if(result.distance < 20){ //if the result point's distance is less than 20 pixels away from the current clip
            currentClip.x=result.point.x; // snap the current clips position
            currentClip.y=result.point.y;
            var posOfMat:int = pointList.indexOf(result.point);
            trace("index: "+pointList[posOfMat]);
            spliced.push(pointList[posOfMat]);
            pointList.splice(posOfMat,1);
            //trace("spliced: "+spliced);
            trace("length: "+pointList.length);
        }
        //otherwise do nothing
    }
    //trace("result: "+result.point);
    trace("full spliced: "+spliced.length);
}

I hope this helps.

Answer 2

In terms of logic, here's what I would do :

Loop through locations (your pointList)

Push an object containing the location and the distance from your piece into an array

Sort resulting array in ascending order based on distance property of the objects

First element of the resulting sorted array is your closest location