Firefox: contenteditable kann nicht bearbeitet werden, wenn sie innerhalb ziehbar Eltern verschachtelt ist

Question

Ich habe diese simple html:

<div draggable=true> 
    <div contenteditable=true>can't edit me</div> 
</div> 

In Chrome ich den Inhalt contenteditable bearbeiten können, aber das kann ich in Firefox und IE nicht. Ist das ein bekanntes Problem? Warum erlaubt Chrome die Bearbeitung? Alle vorhandenen Problemumgehungen?

Answer 1

Das Problem ist, dass die Click-Handhabung für das draggable Element mit der contenteditable Handhabung kollidiert - beide erfordern Sie zu klicken, also welcher Handler sollte verwendet werden?

Es gibt ein paar Möglichkeiten, die Sie ergreifen könnten. Die Version unten deaktiviert draggable, wenn Sie auf, um es dem Benutzer zu ermöglichen, auf dem bearbeitbaren Inhalt zu konzentrieren, und ermöglicht es dann, wenn Sie doppelklicken Sie stattdessen:

<div class="content"> 
    <span>Edit and drag me</span> 
</div> 

$(".content").draggable() 
    .click(function() { 
    $(this).draggable({ disabled: false }); 
}).dblclick(function() { 
    $(this).draggable({ disabled: true }); 
}); 

Alternativ gibt es eine gute Lösung ist here die Einstellung beinhaltet die handle Eigenschaft von draggable zu einem äußeren Element über einen Klassenselektor, der mit CSS positioniert ist. Dies ist wahrscheinlich eine bessere Lösung als Hacking mit Klickereignissen, aber es hängt von Ihrer Verwendung ab.

aktualisieren ich eine leicht modifizierte Version der Lösung hinzugefügt habe ich oben here verknüpft. Sie können den Text bearbeiten und das Ganze über das Griffsymbol ziehen.