multi dragging divs can't be dropped

by J. Jones

HTML

<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<div id="test" class="dragme" style="left:20px;">Square 1</div>
<div class="dragme" style="left:100px;">Square 2</div>
<div class="dragme" style="left:180px;">Square 3</div>
<table>
    <tr class="dragme">
        <td>foo</td>
    </tr>
    <tr class="dragme">
        <td>bar</td>
    </tr>
</table>
<p>
    <p/>
    <ul>
        <li><a class='droppableCat' href='#Daily'>Multi-select some boxes and then Drop all the selected Squares Here on this link</a>

        </li>
    </ul>

CSS

.dragme {
    position:absolute;
    border: 1px solid #89B;
    background: #BCE;
    height:50px;
    width:50px;
    top:150px;
}
.selected {
    background-color: #ECB;
    border-color: #B98;
}

JavaScript

jQuery(function ($) {
    $('.dragme').drag("init", function () {
        return $('.selected');
    }).drag(function (ev, dd) {
        $(this).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    });
});

$('.dragme').click(function () {
    $(this).toggleClass("selected");
});
$(".dragme").droppable({
    drop: function (e, ui) {
        alert("something was dropped");
        $('.' + selectedClass).appendTo($(this)).add(ui.draggable) // ui.draggable is appended by the script, so add it after
        .removeClass(selectedClass).css({
            top: 0,
            left: 0
        });
    }
});


$('.droppableCat')
//.bind('dragenter dragover', false)
.bind('drop', function (event) {
    changeCat($(this), event);
});

function changeCat(name, event) {
    alert("made it to cat");
}