Drag and Drop

HTML

<div id="drop"></div>

<div id="drag">
    <img src="http://lorempixel.com/50/50/sports/1" data-name='Image 1'/>
    <img src="http://lorempixel.com/50/50/sports/2" data-name='Image 2'/>
    <img src="http://lorempixel.com/50/50/sports/3" data-name='Image 3'/>
    <img src="http://lorempixel.com/50/50/sports/4" data-name='Image 4'/>
</div>

CSS

#drop { margin: 10px; width: 200px; height: 100px; border: 1px solid green; }
.highlight { background-color: green; }
.hover { background-color: red; }

JavaScript

$("#drop").droppable({
    activeClass: "highlight",
    hoverClass: "hover",
    drop: function( event, ui ) {
        $(this).html( $(this).html() + ui.draggable.data('name') + '|' );
    }
});

$("#drag img").draggable({
    cursor: 'move',
    revert: true
});