jquery-ui draggabe position

by dekkard

HTML

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
    
    <div id="dropbox">
    </div>  
    
    <div id="imagebox">
        
            <img class="move_image" src="http://img2.wikia.nocookie.net/__cb20100301025455/gtawiki/images/2/2b/Chrome_icon.png" ondblclick="moveImg(this)" />

            <img class="move_image" src="http://graphichive.net/uploaded/fordesigner/1313320262.jpg" ondblclick="moveImg (this)" />
            <img class="move_image" src="http://fc01.deviantart.net/fs71/i/2011/204/a/c/camera_replcemnt_icon_and_png_by_tinsdar-d40eri0.png" ondblclick="moveImg(this)" />

                   <img class="move_image" src="http://img2.wikia.nocookie.net/__cb20100301025455/gtawiki/images/2/2b/Chrome_icon.png" ondblclick="moveImg(this)" />

            <img class="move_image" src="http://graphichive.net/uploaded/fordesigner/1313320262.jpg" ondblclick="moveImg (this)" />
            <img class="move_image" src="http://fc01.deviantart.net/fs71/i/2011/204/a/c/camera_replcemnt_icon_and_png_by_tinsdar-d40eri0.png" ondblclick="moveImg(this)" />
                    <img class="move_image" src="http://img2.wikia.nocookie.net/__cb20100301025455/gtawiki/images/2/2b/Chrome_icon.png" ondblclick="moveImg(this)" />

            <img class="move_image" src="http://graphichive.net/uploaded/fordesigner/1313320262.jpg" ondblclick="moveImg (this)" />
            <img class="move_image" src="http://fc01.deviantart.net/fs71/i/2011/204/a/c/camera_replcemnt_icon_and_png_by_tinsdar-d40eri0.png" ondblclick="moveImg(this)" />
                    <img class="move_image" src="http://img2.wikia.nocookie.net/__cb20100301025455/gtawiki/images/2/2b/Chrome_icon.png" ondblclick="moveImg(this)" />

            <img class="move_image"...

CSS

/*
#dropbox{
    float:right;
    height: 449px;
    width: 442px;
    margin-right: 57px;
    margin-top: 23px;
    background-color: transparent;   
    
    border: 1px solid red;
}

#imagebox{
    display: none;
    float: right;
    margin-bottom: 3%;
    margin-top: 3%;
    margin-right: 5px;
    width: 78%;
    border: 3px solid black; 
 }
*/

#dropbox{
    float:right;
    height: 200px;
    width: 200px;
    border: 1px solid red;
    
    overflow: hidden;
}

#imagebox {
    margin: 23px 10px 0 0;
    float: right;
    border: 1px solid red; 
    min-height: 80px;
    min-width: 90px;
}

img {
    max-width: 80px;
    max-height: 80px;
}

JavaScript

$(document).ready(function() {
    
    var moveImg = function (e){
        var $el = $(e);
        var $dropbox = $('#dropbox');
        
        // Clear position properties added by dregging
        $el.css({ "top": "auto", "bottom": "auto", "left": "auto", "right": "auto" });
        
        if( $el.parents("#imagebox").length !== 0 ){
            $el.detach().appendTo('#dropbox');
            
            //console.log("$el top %d height %d left %d width %d", 
            //           $el.position().top, $el.height(), $el.position().left, $el.width());
            //console.log("$('#dropbox') height %d width %d", 
            //           $dropbox.height(), $dropbox.width());
            
            var dropbox_bottom = $dropbox.offset().top + $dropbox.height();
            var dropbox_right = $dropbox.offset().left + $dropbox.width();
            if ( $el.offset().top + $el.height() > dropbox_bottom ||
                $el.offset().left + $el.width() > dropbox_right ) {
                //console.log("added z-index");
                
                $el.css("z-index", "+=1");
                $el.offset({ 
                    top: dropbox_bottom - $el.height(),
                    right: $dropbox.offset().left          
                });
                
                //console.log("el offset: %o", $el.offset());
            }
        }
        else if( $el.parents("#dropbox").length !== 0 ){
            $el.detach().appendTo('#imagebox'); 
            
            $el.css("z-index", "auto");
        }
    };
    
    $('.move_image').draggable({
        cursor: 'move',
        containment: '#dropbox'
    });
    $('#dropbox').droppable({
        //accept: ".move_image"
    });    
    $(document).on('dblclick', '.move_image', function(){
        moveImg($(this));
    });
    
});