JavaScript DHTML/Document/Drag Drop
"dragDrop()" Example
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.sourceObject.dragDrop()
var m = document.all.sourceObject.dragDrop()
alert(m+".\nDrag operation is not yet completed")
}
</script>
<div onmouseup="function1();">
<input id="sourceObject" size=50 value="The (whole or part) text to drag">
<p>Drop selected text into the following text field.</p>
<input id="targetObject" size=50 value="Drag destination element">
</div>
</body>
</html>
"dropEffect" Example
<html>
<head>
<script language="JavaScript">
function transferDrop() {
window.event.srcElement.innerText = window.event.dataTransfer.getData("text");
window.event.returnValue = false;
}
function transferDrag() {
window.event.dataTransfer.dropEffect = "move";
window.event.returnValue = false;
}
</script>
</head>
<body bottommargin="150">
<p id="mySource"
ondragstart="window.event.dataTransfer.effectAllowed="move";">
Highlight text in this paragraph and drag it to the text area bellow
</p>
<textarea id="myTarget"
ondrop="transferDrop();"
ondragover="window.event.returnValue = false;"
ondragenter="transferDrag();">
</textarea>
"effectAllowed" Example
<html>
<head>
<script language="JavaScript">
function transferDrop() {
window.event.srcElement.innerText = window.event.dataTransfer.getData("text");
window.event.returnValue = false;
}
function transferDrag() {
window.event.dataTransfer.dropEffect = "move";
window.event.returnValue = false;
}
</script>
</head>
<body bottommargin="150">
<p id="mySource"
ondragstart="window.event.dataTransfer.effectAllowed="move";">
Highlight text in this paragraph and drag it to the text area bellow
</p>
<textarea id="myTarget"
ondrop="transferDrop();"
ondragover="window.event.returnValue = false;"
ondragenter="transferDrag();">
</textarea>