如何在所有浏览器的ckeditor中实现可拖动的浮动div？答案

【问题标题】：How to implement floating divs draggable in ckeditor for all browsers?如何在所有浏览器的ckeditor中实现可拖动的浮动div？
【发布时间】：2012-10-08 13:32:13
【问题描述】：

目前如果我们在ckeditor中添加一个绝对位置的浮动div，firefox中会出现一个可拖动的句柄。

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 46px; top: 90px;">Here is a floating layer</div>

但是跨浏览器的行为并不一致。有没有办法在ckeditor中启用拖动选项到选定的div？

这里可以使用可拖动的jquery吗？在这种情况下，我们如何将所需的 jquery 库包含到 ckeditor 所见即所得区域并将事件绑定到 div？

【问题讨论】：

标签： jquery ckeditor draggable jquery-ui-draggable

【解决方案1】：

我已经为上述问题制定了解决方法。在 ckeditor instnaceReady 中，我已将 js 添加到 ckeditor iframe 的 head 部分。

CKEDITOR.on('instanceReady', function(ev) {
   var oEditor = CKEDITOR.instances.editor;
   var h = oEditor.document.getHead();
   var element1 = oEditor.document.createElement( 'script' );
   element1.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
   element1.setAttribute('type','text/javascript');
   h.append(element1);
   var element2 = oEditor.document.createElement( 'script' );
   element2.setAttribute('src','//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js');
   element2.setAttribute('type','text/javascript');
   var element3 = oEditor.document.createElement( 'script' );
   element3.setAttribute('src','drag.js');
   element3.setAttribute('type','text/javascript');
   h.append(element2);
   h.append(element3);

   function drag() {
    try {
     $('iframe').get(0).contentWindow.EnableDrag();
    }
    catch(err) {
     setTimeout(drag,10);
    }
   };

  setTimeout(drag,10);
});

在drag.js中，我添加了EnableDrag()函数。

EnableDrag = function() {
  $('#Layer1').draggable();                
}

此代码适用于 ff、chrome 和 IE。

代码还是有一些问题，每次修改ckeditor的内容或者使用源码按钮，head里包含的binding和js都丢失了。此外，EnableDrag 函数在创建和附加对象后也不能立即使用。所以我使用 setTimeout 来添加延迟。在firefox中，拖动不是很流畅。

如果有人知道实现此功能的正确方法，请提供帮助。

【讨论】：