Drag & Drop operations doesn't work in IE11 Edge mode

6 posts, 0 answers
  1. Erik
    Erik avatar
    4 posts
    Member since:
    Oct 2011

    Posted 15 Nov 2013 Link to this post

    Drag & Drop operations doesn't work in IE11 Edge mode.

    You can't drag and drop text/images/tables in design view.

    Will there be an fix for this soon?

    Kind Regards
  2. Vessy
    Admin
    Vessy avatar
    2245 posts

    Posted 15 Nov 2013 Link to this post

    Hello Erik,

    Thank you for your report.

    The dragging of elements into an editable iframe is a browser provided functionality, which seems not to be supported for the moment in IE11. Since the RadEditor's content area is an editable iframe, you are experiencing the same browser behavior. Once the browser provide this functionality it would be also available in the RadEditor control.

    For your convenience I am attaching a sample editable iframe when you can reproduce the issue on your side - video.

    Regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. Erik
    Erik avatar
    4 posts
    Member since:
    Oct 2011

    Posted 18 Nov 2013 Link to this post

    Hello Veselina,

    I have playing with your example, and found that IE11 sets the editable iframe in Quirks mode. If you change the docType to html5 and force Edge mode via X-UA-Compatible meta tag both in the main document and the Iframe document. Then the drag drop example starts to work in IE 11 Edge mode! I'm guessing this is an security issue in IE11 that the main document is using Edge, but the IFrame document is using Quirks and the two zones can't communicate with each other. 

    Another benefit when the Iframe document is forced into edge mode is that IE can use its latest CSS-standards in design mode!

    I hope this example can help your team to make the rad editor working in IE11 Edge mode!

    Se example below:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>IFRAME test</title>
    </head>
    <body onload="SetEditable()">
        <b>Drag this image to the IFRAME below:</b><br />
        <img id="img1" src="Jellyfish.jpg" width="100" height="100" /><br />
        <b>Editable IFRAME element:</b>
        <br />
        <iframe src="javascript:void(0)" id="editor" style="width: 774px; height: 489px;
            border: 3px solid red;"></iframe>
        <script type="text/javascript">
            var editor1 = document.getElementById("editor"); //reference to the IFRAME element
            var htmlArea1 = document.getElementById("htmlArea"); //reference to the HTML area in which we put the content
            var htmlMode = document.getElementById("htmlMode"); //reference to the HTML area that displays the IFRAME content
            var oDocument = editor1.contentWindow.document;
            var doctypeStr = "<!DOCTYPE html>";
            var sMarkup = doctypeStr + "<html><head><meta http-equiv='X-UA-Compatible' content='IE=Edge'><title>New Document</title></head>" +
                      "<body style='overflow:scroll;margin:0px;padding:0px;height:100%'>" +
                      "</body></html>";
     
            function SetEditable() {
                oDocument.open();
                oDocument.write(sMarkup);
                oDocument.close();
                oDocument["designMode"] = "on";
            }
        </script>
    </body>
    </html>
  4. Vessy
    Admin
    Vessy avatar
    2245 posts

    Posted 19 Nov 2013 Link to this post

    Hi Erik,

    Thank you for your feedback and time spent on testing.

    I have been trying to record a video with the issue in order to log it for a further investigation, but I was not able to reproduce it today. May I ask you to test one more time if the problem is reproducible on your machine, because I assume that issue has been just fixed in IE11?

    Looking forward to hearing from you,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Erik
    Erik avatar
    4 posts
    Member since:
    Oct 2011

    Posted 10 Jan 2014 Link to this post

    Hi

    I finally got some time to investigate this issue further.

    I have been able to debug the javascript code in radeditor and I have found what is causing IE 11 to disable drag drop operations.

    I found this line in telerik asp.net ajax source code RadEditor.js:
    _onDragStart: function(e)
        {
            var doc = this.get_contentWindow().document;
            //This is why IE11 drag drop operations is disabled. IE11 has removed document.selection!!!!
                   if ($telerik.isIE && !doc.selection) {
                return $telerik.cancelRawEvent(e);
            };
    ......

    Because IE11 hase removed deprecated document.selection telerik will cancel the raw event.
    More info about removed legacy features in IE11 can be found here: http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx#legacyAPIs

    Hope this can help the Rad Editor Team to fix ie11 issues.
  6. Vessy
    Admin
    Vessy avatar
    2245 posts

    Posted 14 Jan 2014 Link to this post

    Hi Erik,

    Thank you for the time spared in investigating the case. Indeed the document.selection is deprecated and we should handle its use. Unfortunately, since we are not able to reproduce the issue anymore on our side we could not provide much assistance on the case. Could you try isolating the issue into a sample fully runnable project and send it in case we are missing a specific configuration?

    The dragStart event, though, is fired when an image is dragged into or outside the editor but not vise versa so it should not be connected with the experienced issue. Nevertheless, you can try overriding the dragStart handler in a following way and see whether it will fix the problem on your side:
    <script>
        var $ = $telerik.$;
        var $T = Telerik.Web.UI;
     
        Telerik.Web.UI.RadEditor.prototype._onDragStart = function (e)
        {  
            var doc = this.get_contentWindow().document;
            //if ($telerik.isIE && !doc.selection) {
            //    return $telerik.cancelRawEvent(e);
            //};
            ...
            this._startRange = null;
            if (!e.ctrlKey && !e.ctrlLeft)
            {
                this._startRange = doc.body.createTextRange();//doc.selection.createRange();
            ...
        }
    </script>

    Kind regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top