Summernote + jQuery UI Sortable cannot input text

Question

When I use Summernote and jQuery UI Sortable, I can sort items but cannot input text into the textareas. How can I accomplish it?

HTML

<ul class="sortable-list">
      <li>
        <h2>Textarea 1</h2>
        <textarea name="textarea_1" id="textarea_1" class="summernote">
</textarea>
      </li>
      <li>
        <h2>Textarea 2</h2>
        <textarea name="textarea_2" id="textarea_2" class="summernote">
</textarea>
      </li>
      <li>
        <h2>Textarea 3</h2>
        <textarea name="textarea_3" id="textarea_3" class="summernote">
</textarea>
      </li>
</ul>

JavaScript

$('.summernote').summernote();
$('.sortable-list').sortable({
  axis: 'y'
}).disableSelection();

Please see also jsfiddle:

http://jsfiddle.net/L4pq1fad/

Answer 1

I got the answer in GitHub issue.

https://github.com/summernote/summernote/issues/1174#issuecomment-115235983

The JS should be:

$('.summernote').summernote();
$('.sortable-list').sortable({
  handle: "h2",
  axis: 'y'
});

sanchezzzhak created jsfiddle: http://jsfiddle.net/sanchezzzhak/L4pq1fad/3/