By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,972 Members | 883 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,972 IT Pros & Developers. It's quick & easy.

Drag and drop works dragging down but not up

100+
P: 109
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:
Expand|Select|Wrap|Line Numbers
  1. Imports System.Data.SqlClient
  2. Imports System.Data
  3.  
  4. Partial Class Training_tree_DragDropOrg
  5.     Inherits System.Web.UI.Page
  6.  
  7.     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  8.  
  9.         If Not IsPostBack Then
  10.  
  11.             Dim args As New DataSourceSelectArguments
  12.             Dim dsDivisions As New DataView
  13.             Dim dsDepartments As New DataView
  14.             Dim drDivision As DataRow
  15.             Dim drDepartment As DataRow
  16.             Dim strDepts As String = ""
  17.             Dim strLIDepts As String = ""
  18.             Dim strOLDepts As String = ""
  19.             SqlDataSourceDivisions.SelectCommand = "Select id, Name from Divisions"
  20.             dsDivisions = SqlDataSourceDivisions.Select(args)
  21.  
  22.             If dsDivisions.Table.Rows.Count > 0 Then
  23.  
  24.                 Literal1.Text = ""
  25.                 Dim x As Integer
  26.                 For x = 0 To dsDivisions.Table.Rows.Count - 1
  27.                     drDivision = dsDivisions.Table.Rows(x)
  28.                     Literal1.Text += "<div id='" & drDivision.Item("ame").ToString & "'>"
  29.                     Literal1.Text += "<h1 class='ui-widget-header'>"
  30.                     Literal1.Text += "<h1>" & drDivision.Item("Name").ToString & "</h1>"
  31.                     Literal1.Text += "<div class='ui-widget-content'>"
  32.                     Literal1.Text += "<ol  id='list" & drDivision.Item("Name").ToString & "'>"
  33.  
  34.                     SqlDataSourceDepartments.SelectCommand = "Select id, Name from Departments where DivisionID = " & drDivision.Item("id") & " union select ' ', '&nbsp;&nbsp;&nbsp; '"
  35.                     dsDepartments = SqlDataSourcedepartments.Select(args)
  36.  
  37.                     If dsDepartments.Table.Rows.Count > 0 Then
  38.                         Dim y As Integer
  39.                         Literal1.Text += "<ul id = 'li" & drDivision.Item("Name").ToString & "'  class='" & drDivision.Item("id").ToString & "'>"
  40.  
  41.                         For y = 0 To dsDepartments.Table.Rows.Count - 1
  42.                             drDepartment = dsDepartments.Table.Rows(y)
  43.                             Literal1.Text += "<li >" & drDepartment.Item("Name").ToString & "</li>"
  44.                         Next
  45.                         Literal1.Text += "</ul>"
  46.  
  47.  
  48.                         Literal1.Text += "</ol></div>"
  49.  
  50.                     End If
  51.  
  52.                     strDepts += "#" & drDivision.Item("Name") & ","
  53.                     strLIDepts += "#" & drDivision.Item("Name") & ".li ,"
  54.                     strOLDepts += "#list" & drDivision.Item("Name") & ","
  55.  
  56.                 Next
  57.  
  58.                 Literal1.Text += "</div>"
  59.                 strDepts += strDepts.Substring(0, strDepts.Length - 1)
  60.                 strLIDepts += strLIDepts.Substring(0, strLIDepts.Length - 1)
  61.                 strOLDepts += strOLDepts.Substring(0, strOLDepts.Length - 1)
  62.  
  63.             End If
  64.             LiteralScript.Text = " <script type='text/javascript'>   $(function () {"
  65.             LiteralScript.Text += " $('" & strLIDepts & "').draggable({appendTo: 'body', helper: 'clone' });"
  66.             LiteralScript.Text += " $('" & strDepts & "').droppable( {  activeClass: 'ui-state-default',  hoverClass: 'ui-state-hover',drop: function (event, ui){"
  67.             LiteralScript.Text += "var selected = $('" & strOLDepts & "').find("":contains('"" + ui.draggable.text() + ""')"");"
  68.             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)'});"
  69.             Literal1.Text += "</ol></div>"
  70.             LiteralScript.Text += " });</script> "
  71.  
  72.         End If
  73.  
  74.     End Sub
  75. End Class
Apr 16 '14 #1
Share this Question
Share on Google+
1 Reply


100+
P: 109
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:

Expand|Select|Wrap|Line Numbers
  1. Line: 113
  2. Error: Unable to get value of the property 'appendChild': object is null or undefined
Here is the code as it stands now:

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>$(function () {
  2. $('" & strLIDepts & "').draggable();
  3.  $('" & strOLDepts & "').droppable( {  activeClass: 'ui-state-default',  hoverClass: 'ui-state-hover' ,drop: function (event, ui){
  4. var selected = $('" & strDepts & "').find("":contains('"" + ui.draggable.text() + ""')"");
  5. if (selected.length > 0) { var ol = selected[1]; var li = selected[3]; var oldList = ol.children('li' + ol.id); if(oldList){ oldList.removeChild(li);} 
  6.  else{ ol =selected[3]; alert(ol.id); li=selected[4] ;  ol.removeChild(li);  }}
  7. var newItem = document.createElement('li'); var newItemValue = document.createTextNode(ui.draggable.text()); newItem.appendChild(newItemValue); this.children('li' + this.id).appendChild(newItem);
  8.   }}).sortable({items:'li'});
  9. });
  10. </script>
  11.  
Apr 22 '14 #2

Post your reply

Sign in to post your reply or Sign up for a free account.