Drag and drop images behave different in Firefox and Chrome. We get problems in Chrome.

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 27 Apr 2021 11:07 by ADMIN

Erik

Created on: 26 Apr 2021 08:52

Category: UI for ASP.NET AJAX

Type: Bug Report

Drag and drop images behave different in Firefox and Chrome. We get problems in Chrome.

Inconsistent behavior between Firefox and Chrome (other browser not tested) when drag and dropping content within the editor.

We have more advanced cases (when this breaks things like totally like cutting a block with image and caption into pieces in Chrome) but I tried to simplify the case here as much as I could.

This has been tested on you demo page at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

I have tested using Firefox 88 and Chrome 90, both on Widows 10.

Steps to reproduce:
Switch to html-mode and add the following content:
Lorem ipsum dolor sit amet.
Ut enim ad minim veniam.
<img alt="" src="../../images/attractions_LosGigantes.png" />

Switch back to wysiwyg mode

Drag the image and drop it in the middle of one of the text lines. I dropped it just after Lorum ipsum.

Result is very different in Firefox and Chrome

Firefox :
Lorem ipsum 
<img alt="" src="https://demos.telerik.com/aspnet-ajax/editor/images/attractions_LosGigantes.png" />
dolor sit amet.
Ut enim ad minim veniam.

Chrome:

Lorem ipsum<img alt="" src="https://demos.telerik.com/aspnet-ajax/editor/images/attractions_LosGigantes.png" /> dolor sit amet.
Ut enim ad minim veniam.

We prefer the behavior in Firefox as it works when having mode advanced blocks than just an image. In Chrome the content is split into the new context and broken.

1 comment

ADMIN

Rumen

Posted on: 27 Apr 2021 11:07

Hi Erik.

RadEditor content area is an editable div/iframe (see ContentAreaMode property) which uses the underlying rich text editing engine to render the content and some of its functions. The drag and drop are handled entirely by the browser under which the editor is rendered and the reported behavior is a browser one - something that you can easily reproduce and verify with a standard editable div/iframe element as shown in the following dojo project - http://dojo.telerik.com/@nlazarov/IFIPAR and also shown in the attached video.

The following resources might help you implement the desired drag and drop functionality and customizing what is happening in Chrome:

You can get the image in the drag event and modify it:

<script>
    function OnClientLoad(sender, args) {
        var element = document.all ? sender.get_document().body : sender.get_document();
        var eventHandler = document.all ? "drop" : "dragstart";
        $telerik.addExternalHandler(element, eventHandler, function (e) {
            var selectedElement = sender.getSelectedElement();
            debugger
            // $telerik.cancelRawEvent(e);
        });
    }
</script>
<telerik:RadEditor OnClientLoad="OnClientLoad" ID="RadEditor1" runat="server">
    <Content>
        Try to drag and drop the <img src="https://demos.telerik.com/aspnet-ajax/Editor/images/UserDir/Marketing/watermark.png" /> image in the end of this line.</div>
    </Content>
</telerik:RadEditor>

Regards,
Rumen
Progress Telerik

Тhe web is about to get a bit better!

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.