如何在所有瀏覽器的ckeditor中實現浮動div可拖動？

目前如果我們在ckeditor中添加一個絕對位置的浮動div，可拖動的句柄將出現在Firefox中。如何在所有瀏覽器的ckeditor中實現浮動div可拖動？

<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 wysiwyg區域並將事件綁定到div？

來源

2012-10-08 Vimal

我已經爲上述問題做了一個解決方法。在ckeditor instnaceReady中，我添加了js頭部部分的ckeditor iframe。

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的內容或者使用source按鈕，綁定和包含在頭部的js都迷路了。此外，EnableDrag功能在創建和附加對象後不可用。所以我用setTimeout來添加延遲。在Firefox中，拖動不是很平滑。

如果有人知道實現這個的正確方法，請幫忙。

來源

2012-10-09 07:10:08 Vimal

如何在所有瀏覽器的ckeditor中實現浮動div可拖動？

回答

相關問題