I'm getting the following javascript error when trying to use "beforeStop" function on a jquery .sortable list which contains nested sortable lists:

"Uncaught TypeError: Cannot call method 'removeChild' of null"

Based on other sites I've seen, it might be because my items actually have nested sortable lists under them...and when trying to cancel the sortable, it doesn't like the nested list.   Aside from throwing the error, it still seems to work fine, but I'd still like to avoid the error.

I've tried other solutions, but can't seem to successfully handle the situation in any other way.  The "cancel" or "items" options won't work (still need these to be sortable within their main list), nor will the containment property because there's a mix of items (some can move to the other list, some can't).

I'm really trying to find another solution but I'm out of ideas...any other suggestions?  What I REALLY want is for items that have a certain class within the sortable items to NOT leave their container.  Like a property of "forceContainment: .specialItems" or something. Bleh.

Any help or feedback would be GREATLY appreciated.

Here is a jsFiddle showing what I'm talking about.  If you check the javascript errors/console for the output, you'll see the error being thrown.

http://jsfiddle.net/dataweb/28nMJ/37/

    

1.     <p>sublists shouldn't be able to be dragged out of their normal list</p>
       <ul id="list1" class='mainlist'>
           <li>One (a)</li>
           <li>Two (a)</li>
           <li class="hasItems">Three (a)
               <ul class="sublist">
                   <li>subitem1-1</li>
                   <li>subitem1-2</li>
                   <li>subitem1-3</li>
                   <li>subitem1-4</li>
               </ul>
           </li>
           <li>Four (a)</li>
           <li class="hasItems">Five (a)
               <ul class="sublist">
                   <li>subitem2-1</li>
                   <li>subitem2-2</li>
                   <li>subitem2-3</li>
                   <li>subitem2-4</li>
               </ul>
           </li>
       </ul>
       <ul id="list2" class='mainlist'>
           <li>1</li>
           <li>Two (b)</li>
           <li>Three (b)</li>
       </ul>

javascript:

    

1.     $('ul.mainlist').sortable({
           connectWith: 'ul.mainlist',
           beforeStop: function(ev, ui) {
               if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) {
                   $(this).sortable('cancel');
               }
           }
       });
       $('ul.sublist').sortable({
           connectWith: 'ul.sublist'
       });
   
   

Produces error:

    "Uncaught TypeError: Cannot call method 'removeChild' of null"