For your convenience I prepared an example demonstrating the requested solution. Here it is:
<telerik:RadEditor ID=
"RadEditor1"
OnClientLoad=
"OnClientLoad"
runat=
"server"
>
<ImageManager ViewPaths=
"~/Images"
UploadPaths=
"~/Images"
/>
</telerik:RadEditor>
<script type=
"text/javascript"
>
function
OnClientLoad(editor) {
var
tree = $find(
"<%= RadListBox1.ClientID %>"
);
makeUnselectable(tree.get_element());
}
function
OnClientNodeDragStart() {
setOverlayVisible(
true
);
}
function
OnClientNodeDropping(sender, args) {
var
editor = $find(
"<%=RadEditor1.ClientID%>"
);
var
event = args.get_domEvent();
document.body.style.cursor =
"default"
;
var
result = isMouseOverEditor(editor, event);
if
(result) {
var
itemValue = sender.get_selectedItem().get_value();
editor.setFocus();
editor.pasteHtml(itemValue);
}
setOverlayVisible(
false
);
}
function
OnClientNodeDragging(sender, args) {
var
editor = editor = $find(
"<%=RadEditor1.ClientID%>"
);
var
event = args.get_domEvent();
if
(isMouseOverEditor(editor, event)) {
document.body.style.cursor =
"hand"
;
}
else
{
document.body.style.cursor =
"no-drop"
;
}
}
/* ================== Utility methods needed for the Drag/Drop ===============================*/
//Make all treeview nodes unselectable to prevent selection in editor being lost
function
makeUnselectable(element) {
var
nodes = element.getElementsByTagName(
"*"
);
for
(
var
index = 0; index < nodes.length; index++) {
var
elem = nodes[index];
elem.setAttribute(
"unselectable"
,
"on"
);
}
}
//Create and display an overlay to prevent the editor content area from capturing mouse events
var
shimId =
null
;
function
setOverlayVisible(toShow) {
if
(!shimId) {
var
div = document.createElement(
"DIV"
);
document.body.appendChild(div);
shimId =
new
Telerik.Web.UI.ModalExtender(div);
}
if
(toShow) shimId.show();
else
shimId.hide();
}
//Check if the image is over the editor or not
function
isMouseOverEditor(editor, events) {
var
editorFrame = editor.get_contentAreaElement();
var
editorRect = $telerik.getBounds(editorFrame);
var
mouseX = events.clientX;
var
mouseY = events.clientY;
if
(mouseX < (editorRect.x + editorRect.width) &&
mouseX > editorRect.x &&
mouseY < (editorRect.y + editorRect.height) &&
mouseY > editorRect.y) {
return
true
;
}
return
false
;
}
</script>
<telerik:RadListBox ID=
"RadListBox1"
runat=
"server"
Width=
"200px"
Height=
"200px"
AllowTransfer=
"true"
AllowReorder=
"true"
AutoPostBackOnReorder=
"true"
EnableDragAndDrop=
"true"
OnClientDragging=
"OnClientNodeDragging"
OnClientDropping=
"OnClientNodeDropping"
OnClientDragStart=
"OnClientNodeDragStart"
>
<Items>
<telerik:RadListBoxItem Text=
"Argentina"
/>
<telerik:RadListBoxItem Text=
"Australia"
/>
<telerik:RadListBoxItem Text=
"Brazil"
/>
<telerik:RadListBoxItem Text=
"Canada"
/>
<telerik:RadListBoxItem Text=
"Chile"
/>
<telerik:RadListBoxItem Text=
"China"
/>
<telerik:RadListBoxItem Text=
"Egypt"
/>
<telerik:RadListBoxItem Text=
"England"
/>
<telerik:RadListBoxItem Text=
"France"
/>
<telerik:RadListBoxItem Text=
"Germany"
/>
<telerik:RadListBoxItem Text=
"India"
/>
<telerik:RadListBoxItem Text=
"Indonesia"
/>
<telerik:RadListBoxItem Text=
"Kenya"
/>
<telerik:RadListBoxItem Text=
"Mexico"
/>
<telerik:RadListBoxItem Text=
"New Zealand"
/>
<telerik:RadListBoxItem Text=
"South Africa"
/>
</Items>
</telerik:RadListBox>