Draggable with Droppable Clone

Drag an element from one place to another creating a true clone of the item, so it can exist in both places at once.

by drzaus

HTML

<div id="items">
    <div id="item1" class="item" data-src="http://lorempixel.com/200/200/animals/1"></div>
    <div id="item2" class="item" data-src="http://lorempixel.com/200/200/animals/2"></div>
    <div id="item3" class="item" data-src="http://lorempixel.com/200/200/animals/3"></div>
    <div id="item4" class="item" data-src="http://lorempixel.com/200/200/animals/4"></div>
</div>

<div id="containers">
    <div id="c1" class="container"></div>
    <div id="c2" class="container"></div>
    <div id="c3" class="container"></div>
    <div id="c4" class="container"></div>
    <div id="c5" class="container"></div>
</div>

SCSS

$unit: 0.75em; // base increment of size

#items {
    float:right;
    margin-right:2*$unit;
    width:10*$unit;
    
    .item {
        width:10*$unit; height:10*$unit;
        margin-top:2*$unit;
        border:0.1*$unit solid black;
        z-index:999; // for draggable
    }
}



#containers {
    float:left;
    position:relative;
    margin-left:20*$unit; margin-top:20*$unit;
    
    .container {
        position:absolute;
        width:10*$unit; height:10*$unit;
        border-width:0.2*$unit;
        border-style:solid;
    }

    // once dropped, fit
    .item {
        width:100%; height:100%;
    }

}

#c1 {
    border-color: red; 
    top:0*$unit; left:0*$unit;
}
#c2 {
    border-color: blue;
    top:12*$unit; left:12*$unit;
}
#c3 {
    border-color: green;
    top:-12*$unit; left:12*$unit;
}
#c4 {
    border-color: yellow;
    top:12*$unit; left:-12*$unit;
}
#c5 {
    border-color: purple;
    top:-12*$unit; left:-12*$unit;
}

JavaScript

//all occurs within .ready
;(function($,undefined){
    // set up background images
    $('.item').each(function(i,o){
        $(o).css('background-image', 'url(' + $(o).data('src') + ')');
    });
    
    
    $('.item').draggable({
        cancel: "a.ui-icon", // clicking an icon won't initiate dragging
        //revert: "invalid", // when not dropped, the item will revert back to its initial position
        revert: true, // bounce back when dropped
        helper: "clone", // create "copy" with original properties, but not a true clone
        cursor: "move"
        , revertDuration: 0 // immediate snap
    });
    
    var $container
    $('.container').droppable({
        accept: "#items .item",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
            // clone item to retain in original "list"
            var $item = ui.draggable.clone();

            $(this).addClass('has-drop').html($item);

        }
    });
})(jQuery);