Drag and Drop Example

HTML

<div class="parent">
    <div class="sort" id="1"><input type="text" class="drag"></div>
    <div class="sort" id="2"><a href="#" class="drag">event 2</a></div>
    <div class="sort" id="3"></div>
</div>


<div class="parent">
    <div class="sort" id="1-2"></div>
    <div class="sort" id="2-2"><a href="#" class="drag">event 2</a></div>
    <div class="sort" id="3-2"><a href="#" class="drag">event 2</a></div>
</div>

CSS

div{float:left;}
.sort{clear:left; min-width:50px; min-height:20px; border: 1px solid gray; padding:5px;}

JavaScript

$(document).ready(function() {
    $(".drag").draggable({
        revert: true
    });

    $(".sort").droppable({
        drop: function(event, ui) {

            if (!($(this).children(".drag").size() == 1)) {
                $(this).append(ui.draggable);

                ui.draggable.css({
                    left: 0,
                    top: 0
                });
            }
        }

    });
});