拖拽:替换数据

Dragging: Replacement of the data

本文关键字：数据 替换 拖拽      更新时间：2023-09-26

我得到了一个带有一些html元素的网页，包括一个文本区和一个嵌入的可内容iframe (rte)。

使用这段代码，我设法捕捉主页上的draggesture事件，并设置text/html-data

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

但我得到一个javascript错误在两个文档(主页和iframe):"修改是不允许这个文档"。为什么我得到这个错误?有解决这个问题的方法吗?看起来pimvdb得到了一个解释。

3。当从主页选择<p>some text</p><hr><p>some text</p>并将其拖拽到可满足的iframe中时，当我使用上面的第一个代码示例设置'my_data'(在Draggesture上)时，不会插入任何内容。拖到文本区工作。有人知道这里出了什么问题吗?(问题不发生使用chrome!)

EDIT:这里是一个jsFiddle演示，可以玩一下并理解问题:

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

您正在使用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');
});
相关文章：