title: jQuery UI sortable('cancel') - this.helper is null
body: <p>I am trying to disable a sortable element from sorting when it has been double clicked. When I try to disable it, even without a condition, it gives me the error 'this.helper is null'.</p>
  
  <pre><code>$('.roundedBox:first', division).sortable({
      start: function( event, ui ) {
          if( true === true ) {
              $(this).sortable('cancel');
          }
  
          $(this).parent().data( 'sorting', true ); 
      },
      stop: function() { 
          $(this).parent().data( 'sorting', false ); 
      },
      items: '.department',
      update: function() {},
      placeholder: 'department-placeholder'
  })
  </code></pre>
  
  <p>Any ideas on how I can do this? I don't need it to be this method. Literally anything thing that stops it will work.</p>
  
  <p>The problem is, sorting starts on a single click, but I have another action bound to double click. If it's double clicked, I don't want it to drag.</p>
  
  <hr>
  
  <p>EDIT</p>
  
  <p>After further investigation sparked by Russ C (thank you), I discovered that the problem is not in the sortable itself, but in combination with two other plugins:</p>
  
  <p>jEditable (<a href="http://www.appelsiini.net/projects/jeditable" rel="nofollow noreferrer">http://www.appelsiini.net/projects/jeditable</a>)
  jQuery Context Menu (<a href="http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/" rel="nofollow noreferrer">http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/</a>)</p>
  
  <p>The latter is what actually causes the problem. Because the jEditable <code>h3</code> tag is within a sortable <code>div</code>, which in turn is within a division that has the jQuery Context Menu, which I believe is doing something to stop the propagation (without this last plugin, everything works fine).</p>
  
  <p>To reproduce the problem the following is needed:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="division"&gt;
      &lt;div class="roundedBox"&gt;
          &lt;div class="department" id="dDeppresident_test"&gt;
              &lt;h3&gt;Test&lt;/h3&gt;
              &lt;a href="#" title="Menu" class="icon menu hover-icon"&gt;&lt;img src="/images/icons/menu-colored.png" alt="Menu" height="15" width="15"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ul id="uDepartmentMenu" class="hidden contextMenu"&gt;
      &lt;li&gt;&lt;a href="#editDepartment" class="edit" title="Edit Department"&gt;Edit Department&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#removeDepartment" class="remove" title="Remove Department"&gt;Remove Department&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="uDivisionMenu" class="hidden contextMenu"&gt;
      &lt;li&gt;&lt;a href="#editDivision" class="edit" title="Edit Division"&gt;Edit Division&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#addDivision" class="add" title="Add Division"&gt;Add Division&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#removeDivision" class="remove" title="Remove Division"&gt;Remove Division&lt;/a&gt;&lt;/li&gt;
      &lt;!--&lt;li&gt;&lt;a href="#move" title="Move Division"&gt;Move Division&lt;/a&gt;&lt;/li&gt;--&gt;
      &lt;li class="separator"&gt;&lt;a href="#addDepartment" class="add" title="Add Department"&gt;Add Department&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>// Add context menu to menu icon
  $('.division').contextMenu({
      menu: 'uDivisionMenu'
  }, function(){} );
  
  // Add Sorting
  $('.roundedBox').sortable({
      start: function( event, ui ) {
          //$(this).parent().data( 'sorting', true ); 
      },
      stop: function() { 
          //$(this).parent().data( 'sorting', false ); 
      },
      items: '.department',
      update: function() {},
      placeholder: 'department-placeholder'
  });
  
  
  // Make the division names editable
  $('.department h3').editable( '/ajax/save-department-name.php', {
      indicator   :   'Saving...',
      tooltip     :   'Double click to edit...',
      event       :   'dblclick'
  });
  
  // Add context menu to menu icon
  $('.department a.menu').contextMenu({
      menu: 'uDepartmentMenu', 
      leftButton: true
  }, function(){} );
  
  // Make the departments show remove icon when you hover it
  $('.department').live( 'mouseover', function() {
      $( '.hover-icon', $(this) ).show();
  }).live( 'mouseout', function() {
      $( '.hover-icon', $(this) ).hide();
  });
  </code></pre>
  
  <p>You can see a testing example here (link will be removed at a later date):
  <a href="http://www.realstatistics.com/testing/" rel="nofollow noreferrer">http://www.realstatistics.com/testing/</a></p>
  
  <p>If you remove this section from the jQuery code, all works well:</p>
  
  <pre><code>// Add context menu to menu icon
  $('.division').contextMenu({
      menu: 'uDivisionMenu'
  }, function(){} );
  </code></pre>
  
  <p>I will continue searching for a problem for now.</p>
  
  <hr>
  
  <p>UPDATE</p>
  
  <p>I have fixed this problem. If anyone runs into this issue in the future, I changed the contextMenu plugin to skip its check if the target was on the ".department" class. Right after the "mouseup" function, add a check that checks the event target, like the following:</p>
  
  <pre><code>$(this).mouseup( function(e) {
      if( !$(e.target).hasClass('department') &amp;&amp; !$(e.target).parent().hasClass('department') ) {
  </code></pre>