javascript - 拖动 : Replacement of the data

Question

我得到了一个包含一些 html 元素的网页，其中包括一个文本区域和一个嵌入式 contenteditable iframe(一个 rte)。

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

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

现在，当拖放到主页上的文本区域时，“my_data”会被丢弃。放入 contenteditable iframe 也会掉落“my_data”。

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

1. 将这种处理程序绑定(bind)到 iframe 文档是可行的。我将事件数据设置为类似于上面的代码，但它不起作用。当我将它拖到 iframe 内或主页上的文本区域时，“my_data”不会被插入，而是原始选定的内容。 如何设置“my_data”？

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

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

但是我在两个文档(主页和 iframe)上都遇到了 javascript 错误:“不允许修改此文档”。为什么会出现此错误？有解决办法吗？看起来 pimvdb 对此进行了解释。

3.选择<p>some text</p><hr><p>some text</p>时从主页并将其拖到 contenteditable iframe 中，当我使用上面的第一个代码示例设置“my_data”(在 Draggesture 上)时，不会插入任何内容。拖入文本区域有效。 有人知道这里出了什么问题吗？(使用 chrome 不会出现问题!)

编辑:这是一个 jsFiddle 演示，可以玩弄并理解问题:

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

Answer 1

您正在使用 draggesture 但 dragstart 有效。

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

我清理了你的 fiddle 以弄清楚发生了什么，以便能够解决它，这就是结果。它似乎适用于 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');
});