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
});

Can you put that in a fiddle ? and are you taking about this http://jhtmlarea.codeplex.com/ ? — Kiran Ruth R, Jul 11 '13 at 05:50
yes...My friend was able to come up with a workaround. I forgot I had this question open and unanswered... — harsimranb, Jul 17 '13 at 21:25

score 3 · Accepted Answer · answered Jul 16 '13 at 04:16

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

thanks...that is what I ended up doing...had to re-instantiate the htmlarea — harsimranb, Jul 17 '13 at 21:26

jHTMLArea iframe gets disabled when dropped using jQuery Sortable

1 Answers1