<!doctype html>

<!-- Following the tutorial from https://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/ -->
<html lang="en">
    <head>
    
        <style>
            #content { height:400px; border: 2px solid black; }
            #makeMeDraggable { width: 300px; height: 300px; background: red; }
        </style>
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        
        <script type="text/javascript">
        
            $( init );
            
            function init() {
                $('#makeMeDraggable').draggable({
                    containment: '#content',
                    cursor: 'move',
                    snap: '#content'
                });
            }
        
        </script>
    
    </head>

    <body>    
        <div id="content">
            
            <div id="makeMeDraggable"> 

        </div>
    </div>
    
    </body>
</html>
<!doctype html>

<!-- Following the tutorial from https://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/ -->
<html lang="en">
    <head>
    
        <style>
            #content { height:400px; border: 2px solid black; }
            #makeMeDraggable { width: 300px; height: 300px; background: red; }
            #draggableHelper { width: 300px; height: 300px; background: yellow; }
        </style>
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        
        <script type="text/javascript">
        
            $( init );
            
            function init() {
                $('#makeMeDraggable').draggable({
                    containment: '#content',
                    cursor: 'move',
                    snap: '#content',
                    helper: myHelper
                });
            }

            function myHelper( event ){
                return '<div id="draggableHelper">I am a helper - drag me!</div>';
            }
        
        </script>
    
    </head>

    <body>    
        <div id="content">
            
            <div id="makeMeDraggable"> 

        </div>
    </div>
    
    </body>
</html>
Create a helper object to drag around instead of the main object.
Create a helper object to drag around instead of the main object.
