title: Drag and sort partial views
body: <p>I am trying to add a drag and drop and sortable functionality in my application. What I am trying to do is adding partial views on button click and then trying to move it. Here is the example of what I am trying to do</p>
  
  <pre><code>https://jqueryui.com/draggable/#sortable
  </code></pre>
  
  <p>It is not sorting properly. When i use ul or li instead of div tag, it is adding new partial view and causing some strange behaviour. I am not sure what I am missing. Thanks in advance for your help</p>
  
  <pre><code>Partial View:
  
  &lt;div class="action-item" id="@ViewBag.DivActionID" style="background-color:#EBF3F8;  padding:10px;"&gt;
          &lt;div&gt;
              &lt;img src="~/Images/Move.png" alt="Move" class="editbtn moveaction" /&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
                  &lt;p&gt;Currently showing actions for @ViewBag.DivActionID&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      jQuery(document).ready(function ($) {
          $(document).on('click', '.moveaction', function (e) {
  
              $("#actions").sortable({
                  revert: true
              });
  
              $(this).closest(".action-item").draggable({
                  connectToSortable: "#sortable",
                  helper: "clone",
                  revert: "invalid"
              });
  
              $("ul, li").disableSelection();
          });
  
          });
  &lt;/script&gt;
  
  Controller Code:
  
  public ActionResult CreateNewActions(string actionid)
  {
      ViewBag.DivActionID = actionid;
      return PartialView("~/Views/Interp/_AddActions.cshtml");
  }
  
  Main View:
  
  &lt;div&gt;
       &lt;div id="actions"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var actionidcounter = 0;
  
      $("#btn_addactions").on('click', function () {                    
          actionid = "ActionID" + actionidcounter;
  
          $.ajax({
              async: false,
              data: { 'actionid': actionid },
              url: '/Home/CreateNewActions'
          }).success(function (partialView) {            
              actionidcounter++;                
              $('#actions').append(partialView);
          });
      });
  &lt;/script&gt;
  </code></pre>