Drag-Drop Demo

by audetwebdesign

HTML

<div class="drag">
    <img src="http://www.causingeffect.com/images/made/images/example/cow_50_50_c1.jpg" />
</div>
<div class="drag">
    <img src="http://www.coffeecup.com/images/software/feature-icons/image_editing.png" />
</div>
<div class="drag">
    <img src="http://www.neatimage.com/im/Neat-Image-Logo-64.png" />
</div>
<div class="clear"></div>
<div class="drop-zone"></div>

CSS

.drop-zone {
    border: 1px dotted #9C9898;
    height:350px;
    width:400px;
    margin:0 auto;
    margin-top: 10px;
    overflow:auto;
}
.clear {
    clear:both;
}

JavaScript

jQuery(function ($) {

    $('.drop-zone').droppable({
        accept: '.drag',
        drop: function (event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.inside-drop-zone')) {
                $(this).append($clone.addClass('inside-drop-zone').draggable({
                    containment: '.drop-zone'
                }));
            }
        }
    });

    $('.drag').draggable({
        helper: 'clone'
    });

});