jQuery UI Sortable com CKEditor's

by Salustiano Silva

HTML

<script src="http://ckeditor.com/apps/ckeditor/4.0/ckeditor.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<div id='e'>
    <div id='e1'>
        <textarea id="editor1"></textarea>
        <span class="while-drag">Tive que sair, já volto...</span>
    </div>
    <div id='e2'>
        <textarea id="editor2"></textarea>
        <span class="while-drag">Tive que sair, já volto...</span>
    </div>
</div>

CSS

#e1 {background: blue; padding:10px}
#e2 {background: red; padding:10px}

.while-drag{
    display:none;
    text-align:center;
    color:#FFF;
}

JavaScript

CKEDITOR.replace('editor1');

CKEDITOR.replace('editor2');

var $textareaTemplate = $('<textarea/>');

var textareaId = '',
    CKvalue    = '';

$("#e").sortable({
    activate: function( event, ui ) {
        var $textarea = $(ui.item).find('textarea'),
            $userMsg  = $(ui.item).find('.while-drag');

        textareaId = $textarea.attr("id");

        CKvalue = CKEDITOR.instances[textareaId].getData();
        CKEDITOR.instances[textareaId].destroy();
        $textarea.remove();
        $userMsg.show();
    },
    update: function( event, ui ) {

        $(ui.item).find('.while-drag').hide();
        $(ui.item).append($textareaTemplate.attr("id",textareaId));

        CKEDITOR.replace(textareaId);
        CKEDITOR.instances[textareaId].setData(CKvalue);
    }
});