scatter drag and drop UI alpha

[dz0]

Seems to do the job

<script>
    $(function () {
        $(".draggable").draggable({
            revert: function(valid) {
                if(!valid) {
                    //Dropped outside of valid droppable
                    console.log('bla');
                }
            }
        });
        


        $(".droppable").droppable({
            tolerance: "pointer", // http://api.jqueryui.com/droppable/#option-tolerance  // "touch" seems buggy (because of margin/pading?)?
            hoverClass: "onover",
            
            drop: function (event, ui) {
                console.log("drop");
                
                // d = ui.draggable;
                var dwidth = $(ui.draggable).parent().width();
                var dheight = $(ui.draggable).parent().height();
                // console.log( "dwidth", dwidth );
                // console.log( "dheight", dheight );
                
                var ex_dropped =  $(this).data('content');
                console.log( "ex_dropped", ex_dropped );
                
                if (ex_dropped) { // return previously dropped to its initial place
                    ex_dropped.position({
                    my: "left top",
                    at: "left+5 top-10",
                    of: ex_dropped.parent()
                  });
                  
                  
                
                }
                    
                
                $(this).addClass("filled")
                    .width( dwidth + 20 ).height( dheight )
                    
                    .data('content', ui.draggable );
                    
                $(this).next()
                    .prop('value', $(ui.draggable).text());
               

                
                $(ui.draggable).position({
                    my: "left top",
                    at: "left top-10",
                    of: $(this)
                  });
                
            }, 
            
            out: function( event, ui ) {
                $(this).removeClass("filled")
                        .removeData('content')
                        .next().prop('value', '')
                        // .width( $(this).data('initialWidth') );
                        .width( 30 ).css('width', 30);
                        
                
                
            }
        });


    });
    
    
     // $('.ui-droppable').each( function(){ 
                    // $(this)
                    // .data('initialWidth', $(this).width())
                    // .data('initialHeight', $(this).height());
                // }); 

    // https://stackoverflow.com/a/9879788/4217317
//    # http://jsfiddle.net/vjGY4/152/
//    # https://stackoverflow.com/questions/9317293/jquery-draggable-event-when-dropped-outside-of-parent-div
//    # maybe https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondragenter

</script>


<style>
    .filled {
        border: 1px silver solid;
    }

    .droppable {
        background-color: yellow;
        width: 30px;
        __height: 50px;
        __padding: 0.2em;
        __float: left;
        __margin: 5px;
    }
    .onover{
        background-color: #ffaa00;
    }
    
    input[type=text] {display: none}
    
</style>