title: jQuery ui sortable: Toggle enable - disable sortable on the lists
body: <p>I have multiple lists generated via AJAX in my CMS admin page which enable a user to browse various levels of content. Each list element is generated on user click on previous list. I use jQuery:</p>
  
  <pre><code>$('#divid').on('click', 'ul', function() {
    //code to modify lists
    toggle_sortable();
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/HUiEK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HUiEK.png" alt="enter image description here"></a></p>
  
  <p>Now I am trying to add a toggle button "Drag" to enable and disable jQuery-UI <code>sortable()</code>. However, since the lists are generated dynamically, I am unable to implement this flawlessly. Currently <code>toggle_sortable()</code> looks like:</p>
  
  <pre><code>function toggle_sortable() {
    $('#drag').on('click', function(){
      //statement to check if sortable() is enabled and change state accordingly
    });
  }
  </code></pre>
  
  <p>Please help me find a solution in this situation. Basically I am unable to determine whether <code>sortable()</code> is enabled on a particular list.</p>