How to change element's mode so its dragable

[Orest]

I am using an editor and I implementing my own “set absolute position” command that’s very similar to what you have for an image but my commend button  can do tables, divs etc. The problem that I have is that user needs to do 4 steps to make it work. Here is a sequence
1. Select text that you want to absolute position
2. Click on the toolbar button (at this time I will do editor.getSelectedElement() and tuggle elem.style.position)
3. User needs to click outside the selected area so the text selection is removed
4. Click on div (handles show up) and now my element can be dragged

My question is how can I do steps 3 and 4 in JavaScript command handler? I think it has to be possible because I already have and element that I want to drag it.  I just need to change that element mode or something

[Rumen]

Hello Orest,

The behavior described in points #3 and #4 is also known as "hasLayout property" in IE. For more information, see the following MSDN article - http://msdn.microsoft.com/en-us/library/ms533776%28VS.85%29.aspx. When you set a position css property on a <div>, <table> or other element, IE automatically sets the element's hasLayout style property to true and a border appears when you click on such element. To edit its text you should double click on the element.

Unfortunately, the hasLayout property is read-only and there is no way to force it back to false unless you remove the style attribute.

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Orest]

Actually if I understand correctly I want that to be true in my case. Is there a way for me to re-select an element after I change position?

[Rumen]

Hello Orest,

To avoid any misunderstanding could you please open a support ticket and send a sample working project that demonstrates your scenario. Please, provide instruction how to use the custom button and explain the behavior you want to achieve. It will be best if you can attach a sample video or at least screenshots of the current behavior and of the expected one. I will examine your code and try to provide a solution after that.

For your convenience I have also attached a video which demonstrates how to enable the absolute position button of RadEditor in Firefox. The video also shows how to make a div element to be hasLayout element, which will enable the Absolute Position button.The video is archived with WinRar because of its huge size. You can extract it with WinRar, 7-Zip or another archive tool that supports Rar compression.


Here is the sample code used in the example:

<script type="text/javascript">
    function OnClientCommandExecuted(editor, args) {
        if ("AbsolutePosition" == args.get_commandName()) {
            if ($telerik.isFirefox) {
                var elem = editor.getSelectedElement();
                elem.style.position = "absolute";
                args.set_cancel(true);
            }
        }
    }
</script>
<telerik:radeditor runat="server" ID="RadEditor1"
    OnClientCommandExecuted="OnClientCommandExecuted">
    <Content>
                sample text <img src="http://demos.telerik.com/aspnet-ajax/Common/ProductInfo/Controls_logo.gif" /> text text text<br />
                <div style="width:100px;border: 1px solid red;">this is a div element</div>
   </Content>
</telerik:radeditor>

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.