Preserve IFRAME Content On Drag

On my current project I am implementing the jHtmlArea WYSIWYG plugin on some TEXTAREA's that are in rows that are draggable and sortable. The only problem is that once you begin dr

Solution 1:

I think I finally got it figured out here:

http://jsfiddle.net/5QL7W/27/

The answer slowly came after I realized that the content that seemed to be disappearing on drag was not fully disappearing but was stored somewhere (where I don't know) and would appear back in the rich text editor's IFRAME after a page reload/refresh (something that can't easily be illustrated in a jsfiddle where reloading the page starts the who thing from scratch). Once I finally realized that then I used the jHtmlArea plugin's "dispose" feature (which I think they should have maybe named "destroy") and then instantly re-initialize the plugin and then the data would re-appear. Since I was unable to figure out how to identify the row in the DOM that had a clone being dragged around (or at least how to create a jQuery object of it) I did the dispose and re-initialize on all the TEXTAREA's and then found it worked best when I targeted each one with the .each() method, or else sometimes some of them wouldn't be disposed then reinitialized (see the aforementioned http://jsfiddle.net/5QL7W/24/ for an example).

Pertinent code:

var fixHelperModified = function (e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $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);
    });
    $('#sort TBODY TEXTAREA').each(function () {
        $(this).htmlarea('dispose');
        $(this).htmlarea({
            toolbar: ["bold"]
        });
    });
};

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