title: how to update the sql database after the drag and drop between two list in asp.net C#?
body: <p>can someone please help me? I already connected the parameter value of the 2 tables in database to the list so my only problem is to save their position on sql database after I drag and drop.</p>
  
  <p>Here is my MasterControl-AccessType.aspx:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var adjustment;
         
          $("ol.simple_with_animation").sortable({
                group: 'simple_with_animation',
                pullPlaceholder: false,
                // animation on drop
                onDrop: function  ($item, container, _super) {
  
                  var $clonedItem = $('&lt;li/&gt;').css({height: 0});
                  $item.before($clonedItem);
                  $clonedItem.animate({ 'height': $item.height() });
         
                  $item.animate($clonedItem.position(), function  () {
                    $clonedItem.detach();
                    _super($item, container);
  
  
                  });
                },
  
                // set $item relative to cursor position
                onDragStart: function ($item, container, _super) {
                  var offset = $item.offset(),
                      pointer = container.rootGroup.pointer;
  
                  adjustment = {
                    left: pointer.left - offset.left,
                    top: pointer.top - offset.top
                  };
  
                  _super($item, container);
                },
                onDrag: function ($item, position) {
                  $item.css({
                    left: position.left - adjustment.left,
                    top: position.top - adjustment.top
                  });
                }
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;!-- Meta, title, CSS, favicons, etc. --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      
      &lt;head&gt;
      
          &lt;!--ONLINE Resource----------------------------------------START--&gt;
          
          &lt;!-- Boostrap  START--&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;!-- Boostrap END--&gt;
                  
          &lt;!--Font Awesome START--&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
          &lt;!--Font Awesome END--&gt;
          
          &lt;!--CUSTOM CSS for Profile iFrames START--&gt;
          &lt;link rel="stylesheet" href="css/Profile-Grid.css"&gt;
          &lt;!--CUSTOM CSS for Profile iFrames END--&gt;
  
          &lt;!--JQuery START--&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!--JQuery END--&gt;
          
          &lt;!--JQuery UI START--&gt;
          &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
          
          &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
          
          &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
          
          &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;!--JQuery UI END--&gt;
          
          &lt;!--ONLINE Resource------------------------------------------END--&gt;
          
          &lt;!---------------------------------DIVISION--------------------------------------------------&gt;
          
          &lt;!--OFFLINE Resource---------------------------------------START--&gt;
          
          &lt;!-- Boostrap  START--&gt;
          &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
          &lt;!-- Boostrap END--&gt;
          
          &lt;!--Font Awesome START--&gt;
          &lt;link rel="stylesheet" href="css/font-awesome.min.css"&gt;
          &lt;!--Font Awesome END--&gt;
      
          &lt;!--CUSTOM CSS for Profile iFrames START--&gt;
          &lt;link rel="stylesheet" href="css/Profile-Grid.css"&gt;              
          &lt;!--CUSTOM CSS for Profile iFrames END--&gt;
          
          &lt;!--JQquery START--&gt;
          &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!--JQuery END--&gt;
          
          &lt;!--JQuery UI START--&gt;        
          &lt;link rel="stylesheet" href="css/jquery-ui.css"&gt;
          
          &lt;link rel="stylesheet" href="css/jquery-ui.structure.css"&gt;
          
          &lt;link rel="stylesheet" href="css/jquery-ui.theme.css"&gt;
          
          &lt;script src="js/jquery-ui.js"&gt;&lt;/script&gt;        
          &lt;!--JQuery UI END--&gt;
          
          &lt;!--OFFLINE Resource-----------------------------------------END--&gt;
          
          &lt;link href="css/vendor.css" rel="stylesheet"&gt;
          &lt;script src='js/application.js'&gt;&lt;/script&gt;
  
      &lt;/head&gt;
        
          &lt;div id ="list"&gt;
          &lt;div class="col-xs-6"&gt;
          
              &lt;div class="content_title"&gt;Select Functions&lt;/div&gt;
              
              &lt;div class="content_body"&gt;
                  
                  &lt;ol class=".Drag-N-Drop simple_with_animation vertical"&gt;
                      &lt;%
                          
                          int js = sideMenuNows.Length;
                          for(int i = 0; i &lt; js; i++) { 
                          Response.Write("&lt;li id='Drag-N-Drop-list'&gt;"+sideMenuNows[i]+"&lt;/li&gt;");
                      }
                  %&gt;
                  &lt;/ol&gt;
                  
              &lt;/div&gt;&lt;!--content_body END--&gt;
              
              
              &lt;div class="content_footer"&gt;
                  &lt;i class="fa fa-arrow-right fa-pull-right"&gt;&lt;/i&gt;
              &lt;/div&gt;
              
          &lt;/div&gt;
          
          &lt;div class="col-xs-6"&gt;
          
              &lt;div class="content_title"&gt;All Functions&lt;/div&gt;
              
              &lt;div class="content_body"&gt;
                  
                  &lt;ol class=".Drag-N-Drop simple_with_animation vertical"&gt;
                      &lt;%
                       
                       int j = sideMenuUpdates.Length;
                       for(int i = 0; i &lt; j; i++)
                       {
  
                           Response.Write("&lt;li id='Drag-N-Drop-list'&gt;"+sideMenuUpdates[i]+"&lt;/li&gt;");
                       }
                  %&gt; 
                  &lt;/ol&gt;
                  
                  
              &lt;/div&gt;
              
              
              &lt;div class="content_footer"&gt;
                  &lt;i class="fa fa-arrow-left pull-left"&gt;&lt;/i&gt;
              &lt;/div&gt;
          
          &lt;/div&gt;
          
      &lt;/div&gt; &lt;!--row MAIN END--&gt;
      
  &lt;/div&gt; &lt;!--container fluid END--&gt;
   &lt;/div&gt;
      
  &lt;/body&gt;
  
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>