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