Сортируемый пользовательский интерфейс jQuery («отмена») - this.helper имеет значение null - PullRequest
Новая
       7

Сортируемый пользовательский интерфейс jQuery («отмена») - this.helper имеет значение null

1 голос
/ 26 мая 2010

Я пытаюсь отключить сортируемый элемент от сортировки, когда на него дважды щелкнули. Когда я пытаюсь отключить его, даже без условия, он выдает ошибку «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'
})

Есть идеи, как мне это сделать? Мне не нужен этот метод. Буквально все, что останавливает, будет работать.

Проблема в том, что сортировка начинается одним щелчком, но у меня есть другое действие, связанное с двойным щелчком. Если щелкнуть дважды, я не хочу, чтобы его перетаскивали.

EDIT

После дальнейших исследований Раса С (спасибо) я обнаружил, что проблема не в самой сортируемой, а в комбинации с двумя другими плагинами:

jEditable (http://www.appelsiini.net/projects/jeditable) Контекстное меню jQuery (http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/)

Последнее и является причиной проблемы. Поскольку тег jEditable h3 находится внутри сортируемой div, которая, в свою очередь, находится внутри подразделения, имеющего контекстное меню jQuery, которое, я считаю, делает что-то, чтобы остановить распространение (без этого последнего плагина все работает нормально).

Для воспроизведения проблемы необходимо следующее:

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

Вы можете увидеть пример тестирования здесь (ссылка будет удалена позже): http://www.realstatistics.com/testing/

Если вы удалите этот раздел из кода jQuery, все будет работать хорошо: 

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

Сейчас я продолжу поиск проблемы.

UPDATE

Я исправил эту проблему. Если кто-то столкнется с этой проблемой в будущем, я изменил плагин contextMenu, чтобы пропустить его проверку, если цель была в классе ".department". Сразу после функции mouseup добавьте проверку, которая проверяет цель события, например: 

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

1 Ответ

2 голосов
/ 28 мая 2010

Можете ли вы попробовать добавить задержку: 500 в список параметров для сортировки, возможно, эта задержка может сделать пузырь двойного щелчка правильно?

Точно так же вы можете использовать расстояние: 30, которое скажет сортируемому не начинать работать, пока перетаскивание не будет продолжаться в течение 30 или более пикселей. это можно использовать, чтобы убедиться, что события «щелчка» работают.

...