Problem with dragging of datable rows.

Problem with dragging of datable rows.

I am trying to implement draggale + sortable on two datatables.
I use the option item:'tr' in sortable to make the rows of the
datatable sortable.
But there is no such option in draggable.When i apply draggable on my
table it makes the whole table draggable but i want only rows to be
draggable.
Please provide some inputs
This is my code:
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1"/>
<title>
</title>
<link type="text/css" href="ui.all.css" rel="stylesheet" />
     <link type="text/css" href="demos.css" rel="stylesheet" />
<script type="text/javascript" src="resources/javascript/
jquery-1.3.2.js"></script>
    <script type="text/javascript" src="resources/javascript/
ui.core.js"></script>
    <script type="text/javascript" src="resources/javascript/
ui.accordion.js"></script>
    <script type="text/javascript" src="resources/javascript/
ui.sortable.js"></script>
    <script type="text/javascript" src="resources/javascript/
ui.draggable.js"></script>
    <script type="text/javascript" src="resources/javascript/
ui.droppable.js"></script>
    <style type="text/css">
    .demo ul {
        list-style-type: none;
        margin-left: 250px;
        padding: 0;
        margin-bottom: 10px; }
    .demo li {
        margin: 5px;
        padding: 5px;
        width: 150px; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#mainForm\\:sortable1,#mainForm\\:sortable2").sortable({
            revert: true ,items: 'tr',connectWith: '.rich-table'});
        $("#mainForm\\:draggable").draggable({
            connectToSortable: '#mainForm\\:sortable1', helper:
'clone',revert:'invalid'});
        $("#draggable1").draggable({
            connectToSortable: '#mainForm\\:sortable1', helper:
'clone',revert:'invalid'});
        $("li").disableSelection();
        $("#accordion").accordion({
            icons: {
            header: "ui-icon-circle-arrow-e",
                headerSelected: "ui-icon-circle-arrow-s"
            },
            collapsible: true});
    });
    </script>
</head>
<body onload="onLoadFunctionIntro();">
<h:form id="mainForm">
<div id="MainRightBody">
            <div id="accordion" style="margin-left:250px;">
                <h3><a href="#">LEFT PANEL</a></h3>
                <div id="subDiv">
                    

-----------------<BR>-----------------<BR>-----------------</
p>
                </div>
            </div>
            <div class="demo">
            <h:panelGrid columns="3" >
            <h:panelGroup id="sortable1" >
                <rich:dataTable var="allList" value="#{IntroBean.allLists}" >
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Model" />
                        </f:facet>
                        <h:outputText value="#{allList.MODEL}" />
                        
-----------------

                        <h:outputText value="#{allList.YEAR}" />
                        <h:outputText value="#{allList.MANUFACTURER}" />
                        
-----------------

                        <h:outputText value="#{allList.COLOR}" />
                    </rich:column>
                </rich:dataTable>
                </h:panelGroup>
                <h:panelGroup id="draggable" >
                <rich:dataTable var="allList" value="#{IntroBean.allLists}" >
                    <rich:column >
                        <f:facet name="header">
                            <h:outputText value="Model" />
                        </f:facet>
                        <h:outputText value="#{allList.MODEL}" />
                        <h:outputText value="#{allList.COLOR}" />
                        
-----------------

                        <h:outputText value="#{allList.YEAR}" />
                        
-----------------

                        <h:outputText value="#{allList.MANUFACTURER}" />
                    </rich:column>
                </rich:dataTable>
            </h:panelGroup>
            <h:panelGroup>
                    <li id="draggable1" class="ui-state-highlight">Drag me down</li>
            </h:panelGroup>
            </h:panelGrid>
        </div>
</div>
</h:form>
</body>
</html>
</f:view>
--