Question

我试图在双击时禁用可排序元素。当我尝试禁用它时，即使没有条件，它也会给出错误'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'
})

关于我如何做到这一点的任何想法？我不需要这个方法。从字面上看，任何阻止它的东西都会起作用。

问题是，只需单击即可开始排序，但我有另一个绑定双击的操作。如果双击，我不希望它拖动。

修改

经过Russ C（谢谢）引发的进一步调查后，我发现问题不在于可排序本身，而是与其他两个插件结合使用：

jEditable（http://www.appelsiini.net/projects/jeditable） jQuery上下文菜单（http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/）

后者实际上是导致问题的原因。因为jEditable h3标记位于可排序的div内，而<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 class="separator"><a href="#addDepartment" class="add" title="Add Department">Add Department</a></li> </ul>又位于具有jQuery上下文菜单的分区内，我相信这样做会阻止传播（没有最后一个插件，所有内容）工作正常。）

要重现此问题，需要以下内容：

HTML

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

的jQuery

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

您可以在此处查看测试示例（链接将在以后删除）： http://www.realstatistics.com/testing/

如果从jQuery代码中删除此部分，则一切正常：

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

我现在将继续寻找问题。

更新

我已经解决了这个问题。如果将来有人遇到此问题，我更改了contextMenu插件，以跳过检查目标是否在“.department”类上。在“mouseup”函数之后，添加一个检查事件目标的检查，如下所示：

{{1}}

Answer 1

您可以尝试在可排序参数列表中添加延迟：500，也许该延迟可能会使双击气泡正常？

类似地，你可以使用距离：30，这将告诉sortable在拖动30像素或更多像素之前不能开始工作。这可用于确保“点击”事件有效。

jQuery UI sortable（'cancel'） - this.helper为null

1 个答案: