Jeditable wird versehentlich bei Draggable auf verschachtelten Elementen ausgelöst

Question

Ich verwende jquery-ui's draggable für Drag-and-Drop und jeditable für Inline-Bearbeitung.

Wenn ich ein Element ziehe und ablegen, das auch bearbeitbar ist, tritt direkt nach dem Ablegen jeditable in den 'Bearbeitungsmodus' ein.

Wie kann ich dieses Verhalten deaktivieren?

Bearbeiten - das Problem tritt aufgrund der Verschachtelung auf - siehe dieses Beispiel. Ich habe auch draggable hinzugefügt, um das Beispiel realistischer zu gestalten (das eigentliche Problem liegt auf dieser Seite, an der ich arbeite)

Hinweis - obwohl diese Frage eine akzeptierte Antwort hat, aufgrund der Regeln für das Angebot, ist das Problem für mich immer noch nicht gelöst.

Answer 1

Aktualisiert 2: Verwenden Sie children()

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

als Antwort auf Ihren Kommentar

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

Oder Sie können es so machen:

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

Angenommen, Sie haben so etwas:

HINWEIS: nur zum Spaß, Sie können auch von der Handle-Methode profitieren!

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

Answer 2

Ich habe diesen Beitrag gefunden, weil ich heute genau auf dieses Problem gestoßen bin (verschachteltes jEditable innerhalb eines jQuery UI Draggable); obwohl ich meine Lösung nicht besonders elegant finde, fühlte ich, dass ich sie teilen sollte, falls jemand anderes das gleiche Problem hat.

Statt zu versuchen, das jEditable bei den Drag-Ereignissen zu lösen und neu zu initialisieren (was das Klicken-Ereignis NACH der Neuinitalisierung bei stop() auszulösen scheint), fand ich es einfacher, das jEditable so einzustellen, dass es ein benutzerdefiniertes Ereignis verwendet, das nur bei mouseup ausgelöst wird, wenn der draggable nicht gezogen wurde (ein Klick simulierend).

Die anonyme Funktion als erster Argument von editable sollte durch die URL ersetzt werden, an die du postest, wenn das dein Ding ist.

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

Oftmals sollten Sie versuchen, den Event-Objekt im Drop-Handler abzurufen und dann event.preventDefault(), event.stopImmediatePropagation() oder event.stopPropagation() aufrufen

Zum Glück verwenden Sie jQuery. Dieses Vorgehen mit reinem JS ist lästig.

Answer 4

Ripper,

Ein möglicher Workaround besteht darin, das Doppelklick-Ereignis für Ihr jEditable-Komponente zu verwenden.

Um dies zu tun, initialisieren Sie einfach das jEditable-Objekt mit der folgenden Option:

event: 'dblclick'

Answer 5

Sie könnten versuchen, contenteditable="false" für diese Elemente festzulegen. Versuchen Sie einfach, dieses Attribut im entsprechenden HTML-Tag hinzuzufügen und sehen Sie, was passiert.