How do I utilise 'snippets' of code that I've found on jsfiddle

Question

Hi folks,
I've found a bit of code on jsfiddle that I would like to use within my EDGE document.
The fiddle in question is here
http://jsfiddle.net/NJwER/26/
I created an object on the stage and called it 'draggable' (as per the <div> naming in the jsfiddle example
I then copied this following piece of code from the jsfiddle 'JavaScript' pane into the 'CompositionReady' code panel of my EDGE document
$(function() {
    $("#draggable").draggable({
        helper: function(){
            // Create an invisible div as the helper. It will move and
            // follow the cursor as usual.
            return $('<div></div>').css('opacity',0);
        drag: function(event, ui){
            // During dragging, animate the original object to
            // follow the invisible helper with custom easing.
            var p = ui.helper.position();
            $(this).stop().animate({
                top: p.top,
                left: p.left
            },1000,'easeOutCirc');
But nothing happens at all. Can anybody let me know why this isn't working please?
Thanks,
Tom

Answer 1

Cheers Tim,
In the spirit of sharing I've managed to tweak another cool drag and drop from a jsfiddle to get a nice custom 'revert' animation.
All credit goes to whoever put the code up on jsfiddle and TimJaramillo for showing me how to apply that to EDGE.
Here's the source file https://www.dropbox.com/s/olwmgxwb7m0244y/DRAG_REVERT.zip
And here's the code for on Stage.compositionReady:
yepnope(
    nope:[
        'js/jquery-ui-1.9.2.custom.min.js',
        'js/jquery.ui.touch-punch.min.js',
        'css/jquery-ui-1.9.2.custom.min.css'
    complete: init
//function init() {
//    sym.$('draggable').draggable({
//        helper: function(){
            // Create an invisible div as the helper. It will move and
            // follow the cursor as usual.
//            return $('<div></div>').css('opacity',0);
//        drag: function(event, ui){
            // During dragging, animate the original object to
            // follow the invisible helper with custom easing.
//            var p = ui.helper.position();
//            $(this).stop().animate({
//                top: p.top,
//                left: p.left
//            },1000,'easeOutCirc');
function init() {
   sym.$('draggable').draggable({
    // We Can't use revert, as we animate the original object so
    //revert: true,  <- don't use this
    helper: function(){
        // Create an invisible div as the helper. It will move and
        // follow the cursor as usual.
        return $('<div></div>').css('opacity',0);
    create: function(){
        // When the draggable is created, save its starting
        // position into a data attribute, so we know where we
        // need to revert to.
        // cache $this to keep from having to make
        // lots of DOM calls w jquery
        var $this = $(this);
        $this.data('starttop',$this.position().top)
             .data('startleft',$this.position().left);
    stop: function(){
        // When dragging stops, revert the draggable to its
        // original starting position.
        var $this = $(this);
        $this.stop().animate({
            top: $this.data('starttop'),
            left:$this.data('startleft')
        },1000,'easeOutElastic');
        // replace with whatever jQueryUI easing you want
    drag: function(event, ui){
        // During dragging, animate the original object to
        // follow the invisible helper with custom easing.
        $(this).stop().animate({
            top: ui.helper.position().top,
            left: ui.helper.position().left
        },0,'linear');