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

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

0 Answers 63 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Felix
Top achievements
Rank 1
Felix asked on 08 Oct 2017, 11:00 AM

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

No answers yet. Maybe you can help?

Tags
ImageEditor
Asked by
Felix
Top achievements
Rank 1
Share this question
or