title: Jquery nestedSortable block the drag of an element to the top level
body: <p>I have two problem, </p>
  
  <ol>
  <li><p>This nestedSortable is not working in this code, where's the problem ? </p></li>
  <li><p>I want to block a user to drag an sub-element to the top level (base), i know the library does not allow it, is there a tweak ? </p></li>
  </ol>
  
  <p>Here is all my code : </p>
  
  <pre><code> &lt;html&gt;
       &lt;head&gt;
          &lt;style&gt;
              html {
              background-color: #eee;
              }
  
              body {
              color: #333;
              background-color: #fff;
              font-size: 13px;
              font-family: "Helvetica Neue", Corbel, "Nimbus Sans L", Helvetica, Arial, sans-serif;
              padding: 2em 4em;
              width: 860px;
              margin: 0 auto;
              }
  
              pre, code {
              font-size: 12px;
              }
  
              pre {
              width: 100%;
              overflow: auto;
              }
  
              small {
              font-size: 90%;
              }
  
              small code {
              font-size: 11px;
              }
  
              .placeholder {
              background-color: #cfcfcf;
              }
  
              .ui-nestedSortable-error {
              background:#fbe3e4;
              color:#8a1f11;
              }
  
              ul{
              margin: 0;
              padding: 0;
              padding-left: 30px;
              }
  
              ul.sortable, ul.sortable ul{
              margin: 0 0 0 25px;
              padding: 0;
              list-style-type: none;
              }
  
              ul.sortable {
              margin: 4em 0;
              }
  
              .sortable li {
              margin: 7px 0 0 0;
              padding: 0;
              }
  
              .sortable li div {
              border: 1px solid black;
              padding: 3px;
              margin: 0;
              cursor: move;
              }
  
              h1 {
              font-size: 2em;
              margin-bottom: 0;
               }
  
               h2 {
               font-size: 1.2em;
               font-weight: normal;
               font-style: italic;
               margin-top: .2em;
               margin-bottom: 1.5em;
               }
  
               h3 {
               font-size: 1em;
               margin: 1em 0 .3em;;
               }
  
               p, ol, ul, pre, form {
               margin-top: 0;
               margin-bottom: 1em;
               }
  
               dl {
               margin: 0;
               }
  
               dd {
               margin: 0;
               padding: 0 0 0 1.5em;
               }
  
               code {
               background: #e5e5e5;
               }
  
               input {
               vertical-align: text-bottom;
               }
  
               .notice {
               color: #c33;
               }
  
  
          &lt;/style&gt;
          &lt;script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/&gt;
          &lt;script  src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js' type='text/javascript'/&gt;
          &lt;script  src='http://mjsarfatti.com/sandbox/nestedSortable/jquery.ui.nestedSortable.js' type='text/javascript'/&gt;
          &lt;script type='text/javascript'&gt;
                   $(document).ready(function(){
  
                       $('ul.sortable').nestedSortable({             
                           disableNesting: 'no-nest',
                                 forcePlaceholderSize: true,
                                  handle: 'div',
                                  helper:    'clone',
                                 items: 'li',
                                  maxLevels: 3,
                                  opacity: .6,
                                  placeholder: 'placeholder',
                                  revert: 250,
                                  tabSize: 25,
                                  tolerance: 'pointer',
                                  toleranceElement: '&gt; div'
                       }); });
  
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;ul class="sortable"&gt;         
               &lt;li id="list_1"&gt;&lt;div&gt;Item 1&lt;/div&gt; &lt;/li&gt;
               &lt;li id="list_2"&gt;&lt;div&gt;Item 2&lt;/div&gt; &lt;/li&gt;
                      &lt;ul&gt;
                         &lt;li id="list_3"&gt;&lt;div&gt;Sub Item 2.1&lt;/div&gt; &lt;/li&gt;
                          &lt;li id="list_4"&gt;&lt;div&gt;Sub Item 2.2&lt;/div&gt; &lt;/li&gt;
                         &lt;li id="list_5"&gt;&lt;div&gt;Sub Item 2.3&lt;/div&gt; &lt;/li&gt;
                          &lt;li id="list_6"&gt;&lt;div&gt;Sub Item 2.4&lt;/div&gt; &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;li id="list_7" class="no-nest"&gt;&lt;div&gt;Item 3 (no-nesting)&lt;/div&gt; &lt;/li&gt;
                  &lt;li id="list_8" class="no-nest"&gt;&lt;div&gt;Item 4 (no-nesting)&lt;/div&gt; &lt;/li&gt;
                  &lt;li id="list_9"&gt;&lt;div&gt;Item 5&lt;/div&gt; &lt;/li&gt;
                  &lt;li id="list_10"&gt;&lt;div&gt;Item 6&lt;/div&gt; &lt;/li&gt;
                      &lt;ul&gt;
                          &lt;li id="list_11"&gt;&lt;div&gt;Sub Item 6.1&lt;/div&gt; &lt;/li&gt;
                          &lt;li id="list_12" class="no-nest"&gt;&lt;div&gt;Sub Item 6.2 (no-nesting)&lt;/div&gt; &lt;/li&gt;
                          &lt;li id="list_13"&gt;&lt;div&gt;Sub Item 6.3&lt;/div&gt; &lt;/li&gt;
                         &lt;li id="list_14"&gt;&lt;div&gt;Sub Item 6.4&lt;/div&gt; &lt;/li&gt;
                      &lt;/ul&gt;        &lt;li id="list_15"&gt;&lt;div&gt;Item 7&lt;/div&gt; &lt;/li&gt;
                  &lt;li id="list_16"&gt;&lt;div&gt;Item 8&lt;/div&gt; &lt;/li&gt;
              &lt;/ul&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks ! :)</p>
  
  <p>EDIT : here is a working exemple <a href="http://mjsarfatti.com/sandbox/nestedSortable/" rel="nofollow">http://mjsarfatti.com/sandbox/nestedSortable/</a>
  If I can only get this work, maybe I could look more for my second point</p>
  
  <p>EDIT 2 : I'Ve changed the library as one of the answer told me, but firefox is hanging and there's un unresponsive script</p>
  
  <p>Here is the fiddle : <a href="http://jsfiddle.net/dAwEe/2/" rel="nofollow">http://jsfiddle.net/dAwEe/2/</a></p>
  
  <p>EDIT 3 : Someone have an idea ?</p>
  
  <p>EDIT 4 : <a href="http://jsfiddle.net/dAwEe/3/" rel="nofollow">http://jsfiddle.net/dAwEe/3/</a> I've fixed my problem one : The nested sortable js was not well include :S </p>
  
  <p>Now someone have an idea for the problem two ? </p>