Question

Using firefox, contenteditable=”true” does not seem to work in an li that’s sortable using the .sortable ui plugin.

Html:

<p id="hello" contenteditable="true">this is editable</p>
<ul>
  <li><span contenteditable="true">this is not</span></li>
  <li><span contenteditable="true">neither is this</span></li>      
</ul>

Js:

$("ul").sortable();

You can edit the first <p>, but not any of the <span>‘s in the <li>‘s. This is in Firefox. It works in Chrome.

Any ideas?

All this code is also here: http://jsbin.com/onosir/2/edit

Answer 1

The content in the spans can be edited, once they get focus. It’s probably the sortable’s mousedown method that won’t allow the spans to get focus. Try using a handle for these cases.