拖动:替换数据

Question

我有一个网页,其中包含一些html元素,包括textarea和嵌入式conrameteditable iframe(arte).

使用此代码,我设法捕获主页上的draggesture事件并设置text/html-data

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

现在,当放入主页面上的textarea时,'my_data'会被删除.放入令人满意的iframe也会丢掉'my_data'.

但我在这里有三个问题,我不明白:

1.将这种处理程序绑定到iframes文档是有效的.我将事件数据设置为与上面的代码类似,但它不起作用.当我将它拖到iframe内或主页上的textarea时'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.当<p>some text</p><hr><p>some text</p>从主页面中选择并将其拖入到可信任的iframe时,当我使用上面的第一个代码示例设置'my_data'(在Draggesture上)时,不会插入任何内容.拖入textarea工作.有谁知道这里出了什么问题？(使用chrome不会出现问题!)

编辑:这是一个jsFiddle演示,可以解决问题:

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

Answer 1

您正在使用draggesture但dragstart有效。

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

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