Child node shows twice while Drag

Question

In ASP.net TreeView control, I had used jquery for dragging a node and display dragged node text when dropped. I wanted to drag the node, while that node should not be moved from TreeView. So I had passed "helper:'clone'" as argument through "draggable()". I got the result by not moving the node. But while dragging, the node text is being shown twice. One is along with the mouse pointer and other bit far from the pointer and moves parallely while dragging. What is the solution for this ?

the code is as follows :

<script language="javascript" type="text/javascript">

    $(document).ready(function() {
        $(".treeNode").draggable({helper:'clone'});
        $("#<%=TreeView1.ClientID %>").droppable({
            drop: function(event, ui) {
                alert(event.originalTarget.text);
            }
        });
    });

</script>

<asp:UpdatePanel ID="upnlFirst" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode Text="Employees">
                    <asp:TreeNode Text="HR" Value="SubClass1">
                        <asp:TreeNode Text="Bradley" Value="ID-1234" />
                        <asp:TreeNode Text="Whitney" Value="ID-5678" />
                        <asp:TreeNode Text="Barbara" Value="ID-9101" />
                    </asp:TreeNode>
                    <asp:TreeNode Text="IT" Value="SubClass2">
                        <asp:TreeNode Text="Jimmy" Value="ID-5587" />
                        <asp:TreeNode Text="Samantha" Value="ID-5474" />
                        <asp:TreeNode Text="Freddy" Value="ID-2001" />
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
            <NodeStyle CssClass="treeNode" />
        </asp:TreeView>
    </ContentTemplate>
</asp:UpdatePanel>