title: Jquery Sortable - Required items and optional items
body: <p>I have a page with two lists. The list on the left has some "optional" items. The list on the right is the main list that will be pre-populated with required items. </p>
  
  <p>The user should be able to drag optional items back and forth between the two lists as well as to sort them in either list.</p>
  
  <p>The users should be able to sort the main list items (both required and optional), but should not be able to drag a required item to the optional list. </p>
  
  <p>Does this make sense? 
  What's the best way to achieve this?</p>
  
  <p>I've tried different ways of doing this with the jquery sortable, but can't seem to get it right.
  Any help is much appreciated.</p>
  
  <p>An example list:</p>
  
  <pre><code>&lt;div id="Selector"&gt;
  &lt;ul id="OptionalFields" class='droptrue'&gt;
      &lt;li class="ui-state-highlight, optional"&gt;Optional 1&lt;/li&gt;
      &lt;li class="ui-state-highlight, optional"&gt;Optional 2&lt;/li&gt;
      &lt;li class="ui-state-highlight, optional"&gt;Optional 3&lt;/li&gt;
      &lt;li class="ui-state-highlight, optional"&gt;Optional 4&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="FileFields" class='droptrue'&gt;
      &lt;li class="ui-state-default, required"&gt;Required 1&lt;/li&gt;
      &lt;li class="ui-state-default, required"&gt;Required 2&lt;/li&gt;
      &lt;li class="ui-state-default, required"&gt;Required 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>Currently, my script looks like this:</p>
  
  <pre><code>$(function () {
      $("#OptionalFields").sortable({
          containment: '#Selector',
          tolerance: 'pointer',
          connectWith: '#FileFields',
          cursor: 'pointer',
          revert: 'true',
          opacity: 0.6,
          receive: function () {
              if ($(this).hasClass("required")){ return false};
          }
  
      });
  
      $("#FileFields").sortable({
          containment: '#Selector',
          tolerance: 'pointer',
          connectWith: '#OptionalFields',
          cursor: 'pointer',
          revert: 'true',
          opacity: 0.6,
          update: function () {
              //alert('sorted');
          }
      });
  });
  </code></pre>
  
  <p>Thanks,
  Tony</p>
  
  <p>edited a type/syntax error.</p>