jquery ui drag and drop

HTML

<div id="content">
    <div id="elements">
        <table border="0">
            <tr>
                <td>
                    <div class="element" id="element_7" data-link="element_7.html">
                        <div class="element_left">Sequence analysis</div>
                        <div class="element_right"><a href="#" class="info" title="<p>Infectious virus present in patient blood sample is amplified by culturing virus on cells of human, insect or animal origin.</p>" class="info">i</a>

                        </div>
                    </div>
                </td>
                <td>
                    <div class="element" id="element_4" data-link="element_4.html">
                        <div class="element_left">Perform PCR</div>
                        <div class="element_right"><a href="#" class="info" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut dolor et massa porttitor ornare. Etiam posuere augue ut erat tristique cursus scelerisque libero condimentum. Nulla vitae volutpat nunc. Phasellus scelerisque, enim at euismod vulputate, quam sapien porttitor dolor, ut porta enim velit eget odio. Cras imperdiet ante et urna cursus aliquam. Nulla sit amet dui risus. Aliquam lectus nunc, porta vitae sollicitudin nec, convallis at ante. Sed nec lectus nisi. Aliquam mi augue, tempus ac rhoncus id, consequat sed magna.">i</a>

                        </div>
                    </div>
                </td>
                <td>
                    <div class="element" id="element_2" data-link="element_2.html">
                        <div class="element_left">Extract RNA</div>
                        <div class="element_right"><a href="#" class="info" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut dolor et massa porttitor ornare. Etiam posuere augue ut erat tristique cursus scelerisque libero condimentum. Nulla vitae volutpat nunc. Phasellus scelerisque, enim at euismod vulputate, quam sapien porttitor dolor,...

CSS

body {
    margin: 30px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.8em;
    color: #333;
}
h1, h2, h3, h4 {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#content {
    margin-top: 30px;
    margin-left: 30px;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    left: 0px;
    min-height: 100%;
    top: 0px;
}
#elements {
    width: auto;
    height: auto;
    margin: 0 auto;
    text-align: center;
}
#slots {
    width: auto;
    height: auto;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: normal;
    margin: 0 auto;
}
#slots div {
    width: 160px;
    height: 45px;
    padding: 4px;
    padding-bottom: 0;
    border: 1px solid #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 0 0 10px;
    background: #fff;
}
#slots div:first-child, #elements div:first-child {
    margin-left: 0;
}
#slots div.hovered {
    background: #aaa;
}
#slots div {
    border: 1px dashed #333;
}
.element {
    width: 160px;
    height: 45px;
    padding: 4px;
    padding-bottom: 0;
    border: 1px solid #5d5d5d;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 0 0 10px;
    background: #efefef;
    color: #424141;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3;
}
.element_left {
    float:left;
    width:134px;
    height:auto;
}
.element_right {
    float:right;
    width:19px;
    height:auto;
    text-align:top;
}
.info {
    float:right;
    width: 12px;
    height: 12px;
    border: 1px solid #a7a7a7;
    border-radius: 4px;
    text-align:center;
    text-decoration: none;
    font-family:"Times New Roman", Georgia, Serif;
    font-size: 11px;
    font-weight: bold;
    font-style: italic, oblique;
    color: #a7a7a7;
}
.info.correct {
    border: 1px solid #fff;
   ...

JavaScript

$(init);

function init() {
    $('img').attr('src', "http://napdos.ucsd.edu/image/down_arrow.png");
    $('.element').css('cursor', 'move');
    $('.element').each(function () {
        $(this).data('number', $(this).attr('id').replace('element_', '')).draggable({
            containment: '#content',
            stack: '#elements div',
            cursor: 'hand',
            revert: true
        });
    });

    // Create the element slots

    $('#slots').find('div').each(function () {
        $(this).data('number', $(this).attr('id').replace('slot_', '')).droppable({
            accept: '#elements div',
            hoverClass: 'hovered',
            drop: handleElementDrop
        });
    });
}

function handleElementDrop(event, ui) {
    var slotNumber = $(this).data('number');
    var elementNumber = ui.draggable.data('number');

    if (slotNumber == elementNumber) {
        $(this).droppable('disable');
        ui.draggable.parent().find('.info').addClass('correct');
        ui.draggable.css('cursor', 'pointer')
            .addClass('correct')
            .draggable('disable')
            .position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        })
            .on('click', function () {
            window.open(ui.draggable.attr('data-link'));
        });
        ui.draggable.draggable('option', 'revert', true);
    }
}