在拖动时保留IFRAME内容 [英] Preserve IFRAME content on drag

问题描述

在我当前的项目中，我正在某些TEXTAREA's上实现jHtmlArea WYSIWYG插件，这些插件位于可拖动和可排序的行中.唯一的问题是，一旦开始拖动它们，它们将丢失IFRAME中的所有数据，该数据被插件在关联的TEXTAREA上屏蔽.正在使用jQuery的.clone功能，但它本身并不能携带所有数据，甚至将其设置为.clone(true)或.clone(true, true)也不会保留拖动数据.示例:

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?

推荐答案

我想我终于明白了:

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

当我意识到拖动后似乎消失的内容并没有完全消失，而是存储在某个地方(我不知道的地方)并且在重新加载页面后又出现在富文本编辑器的IFRAME中时，答案就慢慢出现了/refresh(在jsfiddle中无法轻易说明的东西，在该jsfiddle中，重新加载页面会从头开始创建who的东西).一旦我最终意识到，然后我就使用了jHtmlArea插件的"dispose"功能(我认为他们应该将其命名为"destroy")，然后立即重新初始化该插件，然后数据将重新出现.因为我无法弄清楚如何识别DOM中拖曳了一个克隆的行(或者至少如何创建它的jQuery对象)，所以我进行了处置并在所有TEXTAREA上重新初始化，然后发现当我使用.each()方法将每个目标作为目标时，它工作得最好，否则有时它们中的一些将不被处置然后重新初始化(请参见前面提到的 http://jsfiddle.net/5QL7W/24/.

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).

相关代码:

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

这篇关于在拖动时保留IFRAME内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！