拖动：替换数据

Question

我得到了一个网页，其中包含一些 html 元素，包括文本区域和嵌入式内容可编辑 iframe（rte）。

使用此代码，我设法捕获主页上的拖动手势事件并设置文本/html-数据

jQuery(document).bind('draggesture', function(event){                   
    event.originalEvent.dataTransfer.setData('text/html', 'my_data');
});

现在，当放入主页上的文本区域时，“my_data”会被丢弃。 放入可编辑的 iframe 中也会丢弃“my_data”。

但我在这里遇到了三个我不明白的问题：

1. 将这种处理程序绑定到 iframes 文档是有效的。我将事件数据设置为与上面的代码类似，但它不起作用。当我将其拖动到 iframe 内或主页上的文本区域时，不会插入“my_data”，而是插入原始选定的内容。 我可以做什么来设置“my_data”？

2. 我尝试使用 iframe 和主页中的 drop 事件修改/设置数据：

jQuery(ed.getDoc()).bind('drop', function(event){
  event.originalEvent.dataTransfer.setData('text/html',  'my_data');
});

但是我得到了两个文档（主页和 iframe）上的 javascript 错误：“此文档不允许修改”。 为什么我会收到此错误？有解决方法吗？ 看起来 pimvdb 对此有一个解释。

3. 从主页选择

some text

---

some text

并将其拖入当我使用上面的第一个代码示例设置“my_data”（在 Draggesture 上）时，contenteditable iframe 不会插入任何内容。拖入文本区域即可。 有人知道这里出了什么问题吗？（使用 chrome 不会出现问题！）

编辑：这是一个 jsFiddle 演示，可以解决并理解问题：

http://jsfiddle.net/R2rHn/5/

Answer 1

您正在使用 draggesture 但 dragstart 可以工作。

其次，在drop上设置dataTransfer数据是没有意义的，因为此时拖动“包”已经到达了。它在掉落后就被破坏了，那你为什么要在那个时候改变它呢？

我清理了你的小提琴，以弄清楚发生了什么，以便能够解决它，这就是结果。它似乎可以在 Chrome 上运行。

http://jsfiddle.net/R2rHn/7/

tinyMCE.init({
   mode : "exact",
   elements : "content",
   skin : "o2k7",
   skin_variant : "silver",

   setup : function(ed) {
     ed.onInit.add(function(ed, evt) {
       var iframe = ed.getDoc();

       jQuery(iframe).bind('dragstart', function(event){
         event.originalEvent
              .dataTransfer
              .setData('text/plain', 'modified_content_from_iframe');
       });
     });
   },

});

jQuery(document).bind('dragstart', function(event){          event.originalEvent
         .dataTransfer
         .setData('text/html',  'my_data_html');

    event.originalEvent
         .dataTransfer
         .setData('text/plain', 'my_data_plain');
});