13 Replies Latest reply on Feb 12, 2013 12:34 PM by TimJaramillo

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

    pushkin_wilder Level 1

      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

        • 1. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
          TimJaramillo Level 4

          Hi Tom, can you post your files? Are you importing the jQuery UI files, which are required for the "draggable" method?

          • 2. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
            pushkin_wilder Level 1

            Hi Tim,

             

            Thanks so much for getting back to me.

             

            Hmm, is that something that is not included within EDGE then? If so then I guess not. Would that be the whole 'yep nope' thing?

             

            Here's a link to my project file.

             

            Thanks,

             

            Tom

             

            https://www.dropbox.com/s/ykjidtiw6b2u1ff/testing_jsFiddle.zip

            • 3. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
              TimJaramillo Level 4

              Hey Tom, Edge automatically loads jQuery, but not jQuery UI. jQuery UI is required in order to use the "draggable" method. There are a few ways to load external libraries:

               

              You can load jQuery through yepnope:

               

              yepnope(

              {

                        nope:[

                        "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"

                        ],

               

                        complete: init

                        }

              );

               

              //when yepnope has loaded everything execute init();

              function init (){

                        // run your init code here

              }

               

               

              Or you can load it like this:

               

              $.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js", function()

              {

                   // your code here, to run once library is loaded

              });

              • 4. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                pushkin_wilder Level 1

                Hi Tim,

                 

                Thanks for your reply. That's really helpful.

                 

                But unfortunately, it still doesn't seem to be working. Were you able to download the file I uploaded? Might it be something else? Perhaps how I had labled the <div>? I guess the trouble is that I don't really understand all the code (which is probably obvious!) and I'm just trying to tweak things to get them to work for me.

                 

                I have managed to get a straight drag and drop working but the reason that I'm keen to try this jsfiddle version is to have the nice easing options on it.

                 

                Any thoughts on how I might resolve this would be much appreciated, but equally, I don't want to use up loads of your time!

                 

                Thanks,

                 

                Tom

                • 5. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                  TimJaramillo Level 4

                  Hey Tom, I won't be able to look at your file until tomorrow. Are you getting any errors in your console.log when you launch the file? That may steer you in the right direction in the meantime.

                  • 6. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                    pushkin_wilder Level 1

                    Hi Tim,

                     

                    Good idea! I had a look, but there are no errors in either the code panel within EDGE or the console log within Chrome.

                     

                    Just in case you did get a chance to look at the file, here is the most recent version with the jQueryUI loaded in.

                     

                    https://www.dropbox.com/s/j0wsb78sy6i6y0f/slow_drag.zip

                     

                    Thanks,

                     

                    Tom.

                    • 7. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                      TimJaramillo Level 4

                      Hey Tom, can you include all the local js files that you're loading with yepnope?

                       

                      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

                      • 8. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                        pushkin_wilder Level 1

                        Whoops that was daft of me, I'd copied it into a new file to zip, but had forgotten the js folder. Here's a link to the complete set of folders etc.

                        https://www.dropbox.com/s/v8gdnpf8779cxot/slow_drag_ALL.zip

                         

                        Thanks so much for taking the time to look at this, this forum has been AMAZING for helping me learn (the small amount that I have!) of EDGE

                         

                        Cheers,

                         

                        Tom

                        • 9. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                          TimJaramillo Level 4

                          Hi Tom, here ya go.

                           

                          Example (for some odd reason, sometimes I have to refresh for the drag to work ... hmmm):

                          www.timjaramillo.com/code/edge/drag_ease

                           

                          Source:

                          www.timjaramillo.com/code/edge/_source/drag_ease.zip

                           

                          The main issue was how you were addressing the "draggable" div. Since we're inside the Edge API, we have to preface symbols with "sym", so it should be:

                           

                          sym.$('draggable').draggable ...

                           

                          Previously, you had it as:

                           

                          $("#draggable").draggable ...

                           

                           

                          Here's the revised code 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');

                                  }

                                

                              });

                           

                           

                          }

                          • 10. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                            pushkin_wilder Level 1

                            Hey Tim,

                             

                            AMAZING! Thanks so much for that. It makes perfect sense that I hadn't been 'addressing' the <div> correctly. You know, I had even thought that it 'looked' wrong, but wasn't sure what to do to make it correct. That is such a help! I'll be able to apply pretty much all the interactions I need in the project that I'm working on now!

                             

                            Thanks again,

                             

                            Tom

                            • 11. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                              TimJaramillo Level 4

                              Glad to help Tom! Good luck with your project!

                              • 12. Re: How do I utilise 'snippets' of code that I've found on jsfiddle
                                pushkin_wilder Level 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');

                                    }

                                   });

                                 

                                 

                                 

                                 

                                }