Edit in JSFiddle

<div class="drag">
    I am a drag
</div>

<div class="drag">
    Drag me, too
</div>

<div class="drop">
    Drop zone
</div>

$('.drag').on('draginit', function(ev, drag) {
    // Create a ghost for this drag
    drag.ghost();
});

$('.drop').on({
    'dropover' : function(ev, drop, drag) {
        $(this).addClass('highlight');
    },
    'dropout' : function(ev, drop, drag) {
        $(this).removeClass('highlight');
    },
    'dropon' : function(ev, drop, drag) {
        $(this).html('Dropped: ' + drag.element.html());
        $(this).removeClass('highlight');
    }
});

body{ 
    font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif;
}

div {
    padding: 5px;
    margin: 10px;
}

.drag {
    cursor: pointer;
    border: 1px dotted red;
    width: 150px;
    float: left;
}

.drop {
    clear: both;
    border: 1px solid gray;
    width: 200px;
    height: 100px;
    background-color: #EFEFEF;
}

.highlight {
    background-color: yellow;
}