Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div>Make sure and show the console log!</div>
<div id='drag_div'>
Drag Me
</div>
<div id='animate_div'>
Watch Me Move
</div>

CSS

#drag_div { width: 100px; height: 100px; background-color: yellow; }
    #animate_div { width: 100px; height: 100px; background-color: orange; position: relative; }

JavaScript

$(function() {
      $( '#drag_div' ).draggable({
        revert: true,
        revertDuration: 500,
        start: function ( event, ui ) {
          $( '#animate_div' ).animate( { left: 500 }, 10000 );
        },
        stop: function ( event, ui ) {
          $( '#animate_div' ).stop();
        } 
      });
    })