If there is a requirement to use CKEditor or any other html editor in Jquery Sortable list then a recurring problem seen in using these editors in sortable is that the content of the editor is getting lost and editor is uneditable when we drag and drop the CKEditor.
So to fix this issue you have to destroy the editor instance on sortable start event and reinitialize the editor on sortable stop event.
Below is the sample code of JQuery sortable where in start and stop event CKEditor is destroyed and reinitialized to avoid the issue.
//sortable_ul is the id of the unordered list which needs to be sortable. $('#sortable_ul').sortable({ axis: 'y', forcePlaceholderSize: true, stop: function (event, ui) { //get the textarea id and Reinitialize the editor var textarea_id = ui.item.find('textarea').attr('id'); CKEDITOR.replace(textarea_id, { 'width': '100%', 'height': 100 }); }, start: function (event, ui) { //Get the textarea id and Destroy the editor var textarea_id = ui.item.find('textarea').attr('id'); CKEDITOR.instances[textarea_id].destroy(); } }).disableSelection();