событие щелчка, которое срабатывает при перетаскивании элемента (Firefox)

Когда я нажимаю на элемент, я могу редактировать поле благодаря bootstrap-editable.
Когда я перетаскиваю элемент, я могу изменить его положение благодаря jquery.ui .сортируемый.

При использовании Google Chrome все работает нормально.
При использовании Firefox 15.0.1 у меня возникла следующая проблема.

После перемещения элемента появляется всплывающее окно для редактирования поля.
Я полагаю, что это событие связано с распространением события.
Я пытался исправить это, но безуспешно…

Вот мой код куска:

    onSortReceive: function (e, ui) {
        this.$(ui.item[0]).trigger('drop', this.options.taskType);
        // TODO just on firefox there is a issue related to bootstrap-editable
        // it shows the popup even if there is e.stopPropagation() here
        // the only way to fix this issue is to re-render the view
        e.stopPropagation(); // it makes no difference 
        this.render(); // it fix the problem 
                       // but I want to avoid to re-render the view
    },

Полный код вы можете найти здесь:
https://github.com/antonioJs/CoCoTask/pull/21/files

Для получения рабочей версии вы можете перейти по ссылке:
http://computerone.altervista.org/CoCoTask/ (проблема как раз с firefox)

Любая идея, как решить проблему?

Спасибо


javascript jquery twitter-bootstrap jquery-ui-sortable backbone.js
person antonjs    schedule 01.10.2012    source источник
comment
ты пробовал e.preventDefault()?   -  person tkone    schedule 01.10.2012
comment
Привет @tkone, да, я сделал, но это не работает. Спасибо за ваш комментарий.   -  person antonjs    schedule 02.10.2012

Ответы (2)


arrow_upward
1
arrow_downward

Хорошо, вот один рабочий способ, который я нашел. В вашем taskItem.js замените onRender следующим кодом:

    onRender: function () {
        var sortInAction = false;
        this.$el.find('label').mouseup(function(e) {
          sortInAction = 'absolute' === $(e.target).closest('li').css('position');
        }).click(function(e) {
            if (sortInAction)
              e.stopImmediatePropagation();
        }).editable({
            type: 'textarea',
            name: 'task-name',
            validate: this.editTaskName,
            template: '<textarea rows="3"></textarea>'
        });
    },

Надеюсь, поможет.

person rinat.io    schedule 02.10.2012

arrow_upward
0
arrow_downward

Вы должны e.preventDefault() mouseup событие, а не sortreceive jquery.ui событие. Возможно, что-то вроде этого сработает (не проверено):

'mouseup li': 'liMouseUp'

/* ... */

liMouseUp: function(e) {
    if ($(e.target).is('.ui-draggable-dragging')) {
        e.preventDefault();
    }
}
person rinat.io    schedule 01.10.2012
comment
Спасибо за Ваш ответ. В любом случае: 1) $(e.target) = label.editable в обоих случаях перетащите и щелкните 2) e.preventDefault() не имеет значения. 3) с помощью e.stopPropagation() он перестает падать, и появляется всплывающее окно для редактирования поля. - person antonjs; 02.10.2012
comment
Попробуйте $(e.currentTarget) вместо $(e.target) - person rinat.io; 02.10.2012
comment
Да, это так не работает... Добавил еще одно возможное решение. - person rinat.io; 02.10.2012