AUTHOR: Rumen Zhekov
DATE POSTED: April 09, 2018
HOW-TO Disable Drag and Drop of internal and external elements and text in RadEditor SOLUTION Sometimes you may need to prevent the browser drag and drop events to stop unwanted insertion of malicious or bulky content. The client-side solution below will show you how to disable the drag and drop operations of text and HTML elements, regardless of whether they are located inside or outside the content area of the control:
<script>
function
OnClientLoad(sender, args) {
//disable drag and drop of external elements and text in Design mode
$telerik.$(sender.get_contentArea()).bind(
"drop"
,
(e) {
$telerik.cancelRawEvent(e);
});
//disable drag and drop from external elements and text in HTML mode
$telerik.$(sender.get_textArea()).bind(
//disable drag and drop of elements and text inside RadEditor content area
var
element = document.all ? editor.get_document().body : editor.get_document();
eventHandler = document.all ?
:
"dragstart"
;
$telerik.addExternalHandler(element, eventHandler,
}
</script>
<telerik:RadEditor OnClientLoad=
"OnClientLoad"
ID=
"RadEditor1"
runat=
"server"
>
<Content>
Try to drag and drop the <img src=
"Images/Apply.png"
/> image
in
the end of
this
line.</div>
</Content>
</telerik:RadEditor>
<br />
<div style=
"background-color: yellow; display:inline;"
>Select and drag the image <img src=
/> into the editor's content area</div>
>Select and drag the text into the editor's content area</div>
You can also make text and HTML elements unselectable on the page by applying the following CSS selector to them:
<style>
*.unselectable {
-moz-user-select:
-moz-
none
-khtml-user-select:
-webkit-user-select:
-ms-user-select:
user-select:
</style>
<asp:button Id=
"button1"
unselectable=
"on"
class=
"unselectable"
Text=
"Submit"
/>
<div id=
"foo"
>Unselectable DIV element</div>
Resources Buy Try