Question: I'm a newbie to Javascript, jQuery, all the client stuff.

I'm trying to drag and drop a " table row" (each row has a label and 2 checkboxes) within the same table. I'm using jQueryUI's draggable and droppable. The problems I have are:

1. For eg. When I click/drag row 1, to row 3, then row 1 (all elements crunched in one `<td>`) gets set in the `<td>` of any given row that I'm dragging to.
2. The dragged row should be removed from the place it was dragged.

I have included the link [here](http://jsfiddle.net/tf49t/14/).

Answer: 
A few things you'll want to do:

The draggable isn't needed (unless I misread what you're trying to do). All you need is to add a tbody tag around the tr's that you want to have sortable, like this:

```
<table width="350px" id="regFields">
    <thead>            
        <tr id="rowHeader">
            <th align="left" colspan="1">Field Name</th>
            <th align="center" colspan="1">Include</th>
            <th colspan="1"><ul>Required</ul></th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td align="left" colspan="1">First Name</td>
            <td align="center" colspan="1"><input type="checkbox" id="firstNameInclude" name="firstNameInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="firstNameRespReq" name="firstNameRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Last Name</td>
            <td align="center" colspan="1"><input type="checkbox" id="lastNameInclude" name="lastNameInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="lastNameRespReq" name="lastNameRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Company</td>
            <td align="center" colspan="1"><input type="checkbox" id="companyInclude" name="companyInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="companyRespReq" name="companyRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Email</td>
            <td align="center" colspan="1"><input type="checkbox" id="emailInclude" name="emailInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="emailRespReq" name="emailRespReq"></input></td>
         </tr>
    </tbody>
</table>

```

Also, note that you don't want to have multiple ids with the same name. Instead, you'll want classes. I didn't bother fixing that here but you'll want to do that.

The jQuery is actually pretty simple:

```
$('#regFields tbody').sortable({
    items: 'tr'
});

```

I'm selecting the table and the tbody element (so I don't get the header). Sortable automatically does the rest (probably don't even need the items option, but it doesn't hurt).

Hope this helps!

Jamon
Try using sortable instead of draggable

```
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
</head>
<body>
<div id="leftHalfContainer" style="display: block; float: left;">     
    <form name="setupRegForm" id="setupRegForm" method="post">                                            
    <table width="350px" id="regFields">
        <thead>            
            <tr id="rowHeader">
                <th align="left" colspan="1">Field Name</th>
                <th align="center" colspan="1">Include</th>
                <th colspan="1"><ul>Required</ul></th>
            </tr>
        </thead>
            <tr id="row">
                <td align="left" colspan="1">First Name</td>
                <td align="center" colspan="1"><input type="checkbox" id="firstNameInclude" name="firstNameInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="firstNameRespReq" name="firstNameRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Last Name</td>
                <td align="center" colspan="1"><input type="checkbox" id="lastNameInclude" name="lastNameInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="lastNameRespReq" name="lastNameRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Company</td>
                <td align="center" colspan="1"><input type="checkbox" id="companyInclude" name="companyInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="companyRespReq" name="companyRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Email</td>
                <td align="center" colspan="1"><input type="checkbox" id="emailInclude" name="emailInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="emailRespReq" name="emailRespReq"></input></td>
             </tr>
    </table>
    </form>                     
</div><script>
    $("table").sortable({
            items: 'tr'
    });   
</script>
</body>
</html>

```