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 dragging them they lose all the data that was in the IFRAME that the plugin masks over the associated TEXTAREA. jQuery's .clone feature is being used but on its own it doesn't carry all the data over with it and even setting it to .clone(true) or .clone(true, true) does not preserve the data on drag. Example:

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

Is there any way to preserve the content?

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