This is a migrated thread and some comments may be shown as answers.

Drag and drop to specific location

4 Answers 120 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Bartdesign
Top achievements
Rank 2
Bartdesign asked on 03 Dec 2008, 06:08 PM
Hi,

I'm experimenting with the rad editor in combination with drag and drop buttons, which can be dragged onto the radeditor content area.
The radeditor will insert text with the button value. I've got this working without a hitch, the only problem is that i use pasteHtml(), and it's unable to specifiy a position. The dragged button will be inserted at cursor position instead of the location of the mouse. Is there any way to pass the mouse coords so that it will be placed correctly? Or is there any way to make the cursor follow the mouse while dragging?

4 Answers, 1 is accepted

Sort by
0
Tervel
Telerik team
answered on 08 Dec 2008, 09:47 AM
Hi Bart,

I guess to get things working you used the following demo as a starting point:
http://demos.telerik.com/aspnet-ajax/Editor/Examples/TreeviewAndEditor/DefaultCS.aspx







The actual functionality you need, would be very hard (or even impossible) - we have tried to implement it earlier - and we failed because of strange/inconsistent browser behavior in IE - when the target element is a different document. This is the case with the editor's Content Area.

The basic approach (for IE) is to create a range in the editor's content area, then move it to the mouse coords and select the range. However rather than working OK, IE throws a javascript error
"Incompatible markup pointers for this opertion."

Nothing helps - neither explicit setting of focus, nor executing timeouts, nor providing relative or absolute coordinates.

Here is the basic code - that we tried executing in the OnClientNodeDropping function of the example, mentioned above:

    function OnClientNodeDropping(sender, args) 
        {                        
            var editor = $find("<%=RadEditor1.ClientID%>");                                              
    editor.setFocus(); 
    editor.setActive(); 
    var rng = editor.getSelection().getRange(); 
    rng.moveToPoint(494, 322); 
    rng.expand("word"); 
    rng.select(); 
     //.... etc etc etc - call editor.pasteHtml here

We do not think it is possible to workaround, but we invite you to give it a try yourself and if you are successful, we would appreciate sharing your solution with the Telerik community.



Best regards,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Bartdesign
Top achievements
Rank 2
answered on 08 Dec 2008, 10:27 AM
I figured that it wasn't an easy task ;)

But i'll look into it, when i find an solution i will share it here.
It's a shame there are plenty of undocumented client side functions in the Telerik controls. Allot of topics answerd on these forums are replyed with a solution that uses a undocumented call or feature. Maybe it's wise to expand the client side api documentation? Or put an advanced client side api reference in there?

Thanks.
0
Tervel
Telerik team
answered on 08 Dec 2008, 11:30 AM
Hi Bart,

Maybe it is an omission on my side for failing to point out that the object below (and its API) have nothing to do with RadEditor.
The range object returned is the built-in browser TextRange object which is essential when trying to perform any kind of editing operation.

Here is the MSDN page that discusses the TextRange object and its API:
http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx


All the best,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Bartdesign
Top achievements
Rank 2
answered on 08 Dec 2008, 11:32 AM
Ok,

I was not aware of the Textrange object. Thanks for pointing that out! I'll look into it.

Tags
Editor
Asked by
Bartdesign
Top achievements
Rank 2
Answers by
Tervel
Telerik team
Bartdesign
Top achievements
Rank 2
Share this question
or