jQuery UI sortable('cancel') - this.helper is null

Question

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'.

$('.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'
})

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.

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.

---

EDIT

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:

jEditable (http://www.appelsiini.net/projects/jeditable) jQuery Context Menu (http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/)

The latter is what actually causes the problem. Because the jEditable h3 tag is within a sortable div, 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).

To reproduce the problem the following is needed:

HTML

<div class="division">
    <div class="roundedBox">
        <div class="department" id="dDeppresident_test">
            <h3>Test</h3>
            <a href="#" title="Menu" class="icon menu hover-icon"><img src="/images/icons/menu-colored.png" alt="Menu" height="15" width="15"></a>
        </div>
    </div>
</div>

<ul id="uDepartmentMenu" class="hidden contextMenu">
    <li><a href="#editDepartment" class="edit" title="Edit Department">Edit Department</a></li>
    <li><a href="#removeDepartment" class="remove" title="Remove Department">Remove Department</a></li>
</ul>
<ul id="uDivisionMenu" class="hidden contextMenu">
    <li><a href="#editDivision" class="edit" title="Edit Division">Edit Division</a></li>
    <li><a href="#addDivision" class="add" title="Add Division">Add Division</a></li>
    <li><a href="#removeDivision" class="remove" title="Remove Division">Remove Division</a></li>
    <!--<li><a href="#move" title="Move Division">Move Division</a></li>-->
    <li class="separator"><a href="#addDepartment" class="add" title="Add Department">Add Department</a></li>
</ul>

jQuery

// 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();
});

You can see a testing example here (link will be removed at a later date): http://www.realstatistics.com/testing/

If you remove this section from the jQuery code, all works well:

// Add context menu to menu icon
$('.division').contextMenu({
    menu: 'uDivisionMenu'
}, function(){} );

I will continue searching for a problem for now.

---

UPDATE

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:

$(this).mouseup( function(e) {
    if( !$(e.target).hasClass('department') && !$(e.target).parent().hasClass('department') ) {

Answer 1

Can you try adding a delay:500 to the sortable parameters list, perhaps that delay might make the double click bubble properly ?

Similarly, you can use distance:30 which will tell sortable not to start working until the drag has gone on for 30 pixels or more. this can be used to make sure that 'click' events work.