jeditable случайно срабатывает на Draggable на вложенных элементах

Question

Я использую перетаскиваемый jquery-ui для перетаскивания и jeditable для встроенного редактирования.

Когда я перетаскиваю элемент, который также является редактируемым, сразу после того, как он перетаскивается, запускается jeditable и открывается «режим редактирования».

Как я могу отключить это поведение?

Редактировать - проблема возникает из-за netsting - см. этот пример . Я также добавил перетаскиваемый элемент в микс, чтобы сделать пример более реалистичным (реальная проблема в этом сайте , над которым я работаю)

Примечание - несмотря на то, что на этот вопрос есть принятый ответ из-за правил вознаграждения, проблема все еще не решена для меня.

Answer 1

ОБНОВЛЕНО 2: использовать детей ()

ДЕМО 2: http://jsbin.com/izaje3/2

в ответ на ваш комментарий

$(function() {
    $('.editable').editable();
    $('.draggable').draggable({
        drag: function(event, ui) {
            $(this).children('div').removeClass('editable')
        },
        stop: function(event, ui) {
           $(this).children('div').addClass('editable')
        }
    });
});​

DEMO: http://jsbin.com/ihojo/2

$(function() {
    $(".draggable").draggable({
        drag: function(event, ui) {
            $(this).unbind('editable')
        }
    });
    $(".editable").editable();
});

ИЛИ вы можете сделать так:

$(function() {
    $('.editable').editable();
    $('.draggable').draggable({
        drag: function(event, ui) {
            $(this).removeClass('editable')
        },
        stop: function(event, ui) {
            $(this).addClass('editable')
        }
    });
});

Предположим, у вас есть что-то вроде этого:

<div class="draggable editable"></div>  

ПРИМЕЧАНИЕ: просто ради, вы также можете воспользоваться преимуществом, используя метод handle!

http://jqueryui.com/demos/draggable/#handle

Answer 2

Я нашел этот пост, потому что я столкнулся с этой проблемой (вложенной jEditable внутри jQuery UI Draggable) сегодня;хотя я не думаю, что мое решение является особенно элегантным, я чувствовал, что должен поделиться им, если у кого-то есть такая же проблема.

Вместо того, чтобы пытаться отсоединять и повторно инициализировать jEditable для событий перетаскивания (что кажетсячтобы запустить событие click ПОСЛЕ повторной инициализации stop ()), я обнаружил, что проще настроить jEditable для использования пользовательского события, которое запускается только при mouseup, если перетаскиваемый объект не перетаскивался (имитирует щелчок).

Анонимная функция в качестве первого аргумента редактируемого должна быть заменена на URL, который вы отправляете, если это ваша вещь.

http://jsbin.com/izaje3/13

var notdragged = true;
$('.editable').editable(function(value, settings) {
        return value;
    }, {event : 'custom_event'
});
$('.draggable').draggable({
    start: function(event, ui) {
        notdragged = false;
    }
});

$('.editable').bind('mousedown', function() {
    notdragged = true;
}).bind('mouseup', function() {
    if (notdragged) {
        $(this).trigger("custom_event");
    }
});

Answer 3

Вы можете попробовать установить contenteditable = "false" для этих элементов. Просто попробуйте добавить этот атрибут в соответствующий HTML-тег и посмотрите, что произошло.

Answer 4

Потрошитель,

Один из возможных обходных путей - использовать событие двойного щелчка для компонента jEditable.

Для этого просто инициализируйте объект jEditable с помощью следующей опции:

event: 'dblclick'

Answer 5

oftomh, вы должны попытаться удержать объект Event в обработчике сброса, а затем попытаться вызвать event.preventDefault(), event.stopImmediatePropagation() или event.stopPropagation()

, к счастью для васна jQuery.Делать это кросс-браузерно с vanilla JS раздражает.