Drag and drop snapping issue

All-

I have a symbol that i want to "snap" into place on a target

everything works well but the snapping just kinda hangs out in the general area

here's the code:

yepnope({nope:['jquery-ui-1.10.3.custom.min.js', 'jquery.ui.touch-punch.min.js'], complete: init});

function init() {

    //USING CUSTOM JQUERY INCLUDE CODE

    sym.$('GREEN-A-1').draggable({

    opacity:.5, revert:'invalid'

    });

    //DROPPABLE ON TARGET

    sym.$('TARGET-GA1').droppable(

        {    //snap:'GREEN-A-1', snapMode:'inner', snapTolerance:50,

            accept:sym.$('GREEN-A-1'),

            drop: function(){

                //sym.getSybol("GREEN-A-1").play();

                sym.$('TESTGRP').show();

            }

        }

    );

    sym.$('DEFAULT-GA1').droppable(

        {

            accept:sym.$('GREEN-A-1'),

            drop: function(){

                //sym.getSybol("GREEN-A-1").play(); //ONLY DO THIS IF ANIMATING SOMETHING INSIDE THE DROPPABLE SYMBOL

                sym.$('TESTGRP').hide();

            }

        }

    );

}

i want the snapping to work like the fourth box in this expample

http://jquery-ui.googlecode.com/svn/tags/1.6rc3/demos/draggable/snap.h tml

also, is there an intuitive way to migrate jquery code examples i find on the web to edge?

thanks