Can't Get The Location Right When I Click on Insert Image

1 posts, 0 answers
  1. Felix
    Felix avatar
    1 posts
    Member since:
    Oct 2017

    Posted 08 Oct 2017 Link to this post

    Hi!

    Since the radimageeditor insert dialog only allow images from a given url, I tried to apply the below logic:

     

       <script>
             $(document).ready(function () {
                 $("#signpanel").draggable({
                     containment: 'parent',
                     append: $find("editor1"),
                     addClasses: false,
                     start: function (event, ui) {
                         //$("#signpanel").clone();
                        // alert("start");
                     },
                     stop: function (event, ui) {
                         var top = ($('#signpanel').offset().top);
                         var left = ($('#signpanel').offset().left);
                          var getimg = $("#signimage").attr("src");
                         $find("editor1").insertImage(left, top, getimg, [])
                     }
                 });
                 
             });

    </script> 

     
     
     
    <div class="col-md-8">
                         <div id="pa">
      <telerik:RadImageEditor ID="editor1" RenderMode="Lightweight" EnableResize="false" OnImageSaving="editor1_ImageSaving"
       style="height:auto;"  Width="730px" CanvasMode="Yes" ImageManager-RenderMode="Lightweight" AllowedSavingLocation="ClientAndServer"
          runat="server"  StatusBarMode="Hidden" Skin="Silk">
         </telerik:RadImageEditor>
                                          
                                
         <div  id="signpanel" style="width:130px; border:2px solid green;">
        <asp:Image runat="server" ID="signimage" ImageUrl="~/signatures/issa.jpeg" style="width:100%; height:60px"/>
        <br />
        <asp:Label runat="server" ID="signname" Font-Bold="true"></asp:Label>
    </div>

     

    From the above, I have put my RadImageEditor inside a div named "pa" and I have another div named "signpanel". Now when I drag the "signpanel" div inside the radimageeditor and stop, the "onDradStop" event of draggable fired and I get the location of the div and the "insertImage" event of radimageeditor fired. But the problem is the image will be inserted but not at the exact spot where the draggable div is. Another problem is when you scroll the image in the radimageeditor up, and drag the div again, the image is inserted at the same place where the div was before I scroll the image.

     

    Please help me out with this, I have tried several tricks yet not working.

     

    Also attached is a screenshot of the result I get

Back to Top