jHTMLArea iframe gets disabled when dropped using jQuery Sortable

Question

I'm using jQuery Sortable with jHTMLArea. I basically have DIVs that are sortable and the DIVs are sortable. However, when you drop the DIV on any location, the contents of the jHTMLArea become empty and jHTMLArea becomes disabled. The iFrame and textarea both get disabled. You cannot write anything inside of it.

I'm not sure what the issue, so I'm wondering if this is has to do with the libaries themselves.

The code I'm using is this:

// Enable Sortables
$("div.nnUtil").sortable({
    cancel: ".nnSettings",
    connectWith: 'div.nnUtil',
    distance: 5,
    forcePlaceholderSize: true,
    items: '> div.nnItems',
    placeholder: 'ui-state-highlight',
    revert: 250
});

Answer 1

I've found the solution.

Basically when you sort the list the the content of the div get hidden. which blocks the htmlarea content. There are number of issues logged in the jHTMLArea forum regarding this.

What I did is when you dropped the div I've re rendered the HTMLArea.

Here is the working demo.

$('textarea').htmlarea();

var fixHelperModified = function (e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone(true, true);
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
},
updateIndex = function (e, ui) {
    $('td.index', ui.item.parent()).each(function (i) {
        $(this).html(i + 1);
    });
    ui.item.find('textarea').htmlarea('dispose');
    ui.item.find('textarea').htmlarea();
};

$("#sort TBODY").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();

Example problems

http://jhtmlarea.codeplex.com/workitem/16028

http://jhtmlarea.codeplex.com/workitem/10907