Connect PageblockTable and Plain HTML Table in visual force using sortable in Jquery

Question

Im Trying to connect pageblocktable and plain HTML table in visualforce page but I'm not able to do.

When Im Dragging element from table 1 to table 3. element is not being appended to table 3. Can anyone please correct me where I'm doing wrong?

    <apex:page controller="TheController">
<apex:stylesheet value="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
<apex:includeScript value="//code.jquery.com/jquery-1.10.2.js"/>
<apex:includeScript value="//code.jquery.com/ui/1.11.2/jquery-ui.js"/>

<script>
    $(document).ready(function() {
        $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody").addClass('connectedSortable');
        $("#table3").find("tbody").addClass('.connectedSortable');
        $("#table3").find("tbody").sortable({});

        $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody")
            .sortable({
                connectWith: ".connectedSortable",
                items: "> tr",
                appendTo: "parent",
                helper: "clone",
                cursor: "move",
                zIndex: 999990,
                   receive: function(event,ui){
                    var targetList = ui.item.html();
                    html = $.parseHTML(targetList);
                    var ss='';
                    $.each( html, function(i,el){
                        ss=$(this).text();
                        return false;
                    });
                    alert('before method call'+(this.id));
                    TheController.updateStatus(ss,this.id,function(result,event){                            
                        alert('event.status'+event.status);
                        if(event.status){
                            location.reload(true);

                        }
                    },{escape: false});
                }
            });

            <apex:form id="theForm">
                <apex:pageBlock id="thePageBlock">
                    <apex:pageBlockTable title="Accounts having Warm Rating" value="{!warmAccounts}" var="account" id="theTable1" styleClass="mytable">

                       <ul> <li>&nbsp;</li>
                       </ul>
                        <apex:column value="{!account.Id}"/>
                        <!--<apex:column value="{!account.Name}"/>
                        <apex:column value="{!account.AccountNumber}"/>
                        <apex:column value="{!account.rating}"/>
                        <apex:column value="{!account.Phone}"/>
                        <apex:column value="{!account.Fax}"/>-->
                </apex:pageBlockTable><br/><br/>
          </apex:pageBlock>
    </apex:form>

<div>
<table id="table3" border="3">
    <tbody>
        <tr>
            <td>{!con.Id}</td>                
        </tr>
        <tr>
            <td>{!con.name}</td>                
        </tr>
    </tbody>
</table>
</div>

Answer 1

As i have checked the code, You didn't put the </apex:pageBlock> after the </apex:pageBlockTable>

Try with below code:

<apex:page controller="TheController">
    <apex:stylesheet value="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <apex:includeScript value="//code.jquery.com/jquery-1.10.2.js" />
    <apex:includeScript value="//code.jquery.com/ui/1.11.2/jquery-ui.js" />

    <script>
    $(document).ready(function() {
        $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody").addClass('connectedSortable');
        $("#table3").find("tbody").addClass('.connectedSortable');
        $("#table3").find("tbody").sortable({});
        $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody")
        .sortable({
            connectWith: ".connectedSortable",
            items: "> tr",
            appendTo: "parent",
            helper: "clone",
            cursor: "move",
            zIndex: 999990,
            receive: function(event, ui) {
                var targetList = ui.item.html();
                html = $.parseHTML(targetList);
                var ss = '';
                $.each(html, function(i, el) {
                    ss = $(this).text();
                    return false;
                });
                alert('before method call' + (this.id));
                TheController.updateStatus(ss, this.id, function(result, event) {
                    alert('event.status' + event.status);
                    if (event.status) {
                        location.reload(true);
                    }
                }, {
                    escape: false
                });
            }
        }); 
        </script>
    <apex:form id = "theForm">
        <apex:pageBlock id = "thePageBlock">
            <apex:pageBlockTable title="Accounts having Warm Rating" Value="{!warmAccounts}" var="account" id="theTable1" styleClass="mytable">
                <ul>
                    <li>&nbsp;</li> 
                </ul>
                <apex:column value="{!account.Id}"/>
                <apex:column value="{!account.Name}"/>
                <!--<apex:column value = "{!account.AccountNumber}"/>
                <apex:column value="{!account.rating}"/>
                <apex:column value="{!account.Phone}"/>
                <apex:column value="{!account.Fax}"/>-->
            </apex:pageBlockTable><br/><br/>
        </apex:pageBlock>
    </apex:form>
    <div>
        <table id="table3" border="3">
            <tbody>
                <tr>
                    <td>{!con.Id} </td>
                </tr> 
                <tr>
                    <td>{!con.name}</td>
                </tr>
            </tbody></table></div>
</apex:page>

Hope this helps...

Answer 2

You don't need the period(.) here. Add class takes the class name, not the selector.

 $("#table3").find("tbody").addClass('.connectedSortable');

This is should be this:

$("#table3").find("tbody").addClass('connectedSortable');

Also, you don't need find. You can just do this.

$("#table3 tbody").addClass("connectedSortable");

But don't bother and just add it directly.

<tbody class="connectedSortable">

If you're using jQuery anyhow you can get the pageBlockTable tbody this way.

$("table[id$=theTable1] tbody");

Sortable connect With takes the selector, so this part is correct.

connectWith: ".connectedSortable"