jQuery UI draggable onto another draggable

by joshjs

HTML

<table id="list">
    <tr class="row">
        <td>1</td>
        <td>foo</td>
    </tr>
    <tr class="row">
        <td>2</td>
        <td>bar</td>
    </tr>
</table>
<div id="targetWrapper">
    <div id="target">
    </div>
</div>

CSS

#list {
    
}

#targetWrapper {
    border: solid 1px #666;
    background:cornflowerblue;
    height: 200px;
}
#target {
    background:white;
    height:50px;
    width:50px;
}
.hoverClass {
    background:orange !important;
}

JavaScript

$(function() {
    $("#list").find(".row").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $("#target").draggable({});
    $("#target").droppable({ accept: ".row", hoverClass: "hoverClass" });
});