Drag and drop works dragging down but not up

[dbrewerton]

Hey experts, I have this vb.net code that allows me to drag and drop between gridviews that are dynamically produced from the database in a downward direction but will not do that for dragging up. For example, I can drag to department2 from department1 but it will nto let me drag department2 to department1. My aspx page only contains two literal controls as placeholders for the gridview and JQuery produced by the code. Here is my code:

Imports System.Data.SqlClient
Imports System.Data
 
Partial Class Training_tree_DragDropOrg
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
        If Not IsPostBack Then
 
            Dim args As New DataSourceSelectArguments
            Dim dsDivisions As New DataView
            Dim dsDepartments As New DataView
            Dim drDivision As DataRow
            Dim drDepartment As DataRow
            Dim strDepts As String = ""
            Dim strLIDepts As String = ""
            Dim strOLDepts As String = ""
            SqlDataSourceDivisions.SelectCommand = "Select id, Name from Divisions"
            dsDivisions = SqlDataSourceDivisions.Select(args)
 
            If dsDivisions.Table.Rows.Count > 0 Then
 
                Literal1.Text = ""
                Dim x As Integer
                For x = 0 To dsDivisions.Table.Rows.Count - 1
                    drDivision = dsDivisions.Table.Rows(x)
                    Literal1.Text += "<div id='" & drDivision.Item("ame").ToString & "'>"
                    Literal1.Text += "<h1 class='ui-widget-header'>"
                    Literal1.Text += "<h1>" & drDivision.Item("Name").ToString & "</h1>"
                    Literal1.Text += "<div class='ui-widget-content'>"
                    Literal1.Text += "<ol  id='list" & drDivision.Item("Name").ToString & "'>"
 
                    SqlDataSourceDepartments.SelectCommand = "Select id, Name from Departments where DivisionID = " & drDivision.Item("id") & " union select ' ', '&nbsp;&nbsp;&nbsp; '"
                    dsDepartments = SqlDataSourcedepartments.Select(args)
 
                    If dsDepartments.Table.Rows.Count > 0 Then
                        Dim y As Integer
                        Literal1.Text += "<ul id = 'li" & drDivision.Item("Name").ToString & "'  class='" & drDivision.Item("id").ToString & "'>"
 
                        For y = 0 To dsDepartments.Table.Rows.Count - 1
                            drDepartment = dsDepartments.Table.Rows(y)
                            Literal1.Text += "<li >" & drDepartment.Item("Name").ToString & "</li>"
                        Next
                        Literal1.Text += "</ul>"
 
 
                        Literal1.Text += "</ol></div>"
 
                    End If
 
                    strDepts += "#" & drDivision.Item("Name") & ","
                    strLIDepts += "#" & drDivision.Item("Name") & ".li ,"
                    strOLDepts += "#list" & drDivision.Item("Name") & ","
 
                Next
 
                Literal1.Text += "</div>"
                strDepts += strDepts.Substring(0, strDepts.Length - 1)
                strLIDepts += strLIDepts.Substring(0, strLIDepts.Length - 1)
                strOLDepts += strOLDepts.Substring(0, strOLDepts.Length - 1)
 
            End If
            LiteralScript.Text = " <script type='text/javascript'>   $(function () {"
            LiteralScript.Text += " $('" & strLIDepts & "').draggable({appendTo: 'body', helper: 'clone' });"
            LiteralScript.Text += " $('" & strDepts & "').droppable( {  activeClass: 'ui-state-default',  hoverClass: 'ui-state-hover',drop: function (event, ui){"
            LiteralScript.Text += "var selected = $('" & strOLDepts & "').find("":contains('"" + ui.draggable.text() + ""')"");"
            LiteralScript.Text += " var li = selected[1];  var ol = selected[0];  if(selected.length >0){ ol.removeChild(li); this.appendChild(li);}}}).sortable({items:'li:not(.placeholder)'});"
            Literal1.Text += "</ol></div>"
            LiteralScript.Text += " });</script> "
 
        End If
 
    End Sub
End Class

[dbrewerton]

Done a bit more tweaking, this one allows drag up and down but gives me an error. When I drop the item to move, I get this error:

Line: 113
Error: Unable to get value of the property 'appendChild': object is null or undefined

Here is the code as it stands now:

<script type='text/javascript'>$(function () {
$('" & strLIDepts & "').draggable();
 $('" & strOLDepts & "').droppable( {  activeClass: 'ui-state-default',  hoverClass: 'ui-state-hover' ,drop: function (event, ui){
var selected = $('" & strDepts & "').find("":contains('"" + ui.draggable.text() + ""')"");
if (selected.length > 0) { var ol = selected[1]; var li = selected[3]; var oldList = ol.children('li' + ol.id); if(oldList){ oldList.removeChild(li);} 
 else{ ol =selected[3]; alert(ol.id); li=selected[4] ;  ol.removeChild(li);  }}
var newItem = document.createElement('li'); var newItemValue = document.createTextNode(ui.draggable.text()); newItem.appendChild(newItemValue); this.children('li' + this.id).appendChild(newItem);
  }}).sortable({items:'li'});
});
</script>