revision:
This attribute fires on a mouse double-click on the element.
Supported HTML tags: all HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
<element ondblclick="script"></element>
script: the script to be run on ondblclick.
A function is triggered when the button is double-clicked. The function outputs some text in a p element with id="demo".
codes:
<button style="margin-left:3vw;" ondblclick="clickTwice()">Double-click me</button>
<p class="spec" id="demo" style="color:red"></p>
<p class="spec">A function is triggered when the button is double-clicked.
The function outputs some text in a p element with id="demo".</p>
<script>
function clickTwice() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
Field1:
Field2:
A function is triggered when the button is double-clicked. The function copies the text from Field1 into Field2.
codes:
<p class="spec">Field1: <input type="text" id="field1" value="Hello World!"></p>
<p class="spec">Field2: <input type="text" id="field2"></p><br>
<button style="margin-left:3vw;" ondblclick="clickAgain()">Copy Text</button>
<p class="spec">A function is triggered when the button is double-clicked.
The function copies the text from Field1 into Field2.</p>
<script>
function clickAgain() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
Links and images are draggable by default, and do not need the "draggable" attribute.
There are many event attributes that are used, and can occur, in the different stages of a drag and drop operation:
events fired on the draggable target (the source element):
ondragstart - fires when the user starts to drag an element;
ondrag - fires when an element is being dragged;
ondragend - fires when the user has finished dragging the element
events fired on the drop target:
ondragenter - fires when the dragged element enters the drop target;
ondragover - fires when the dragged element is over the drop target;
ondragleave - fires when the dragged element leaves the drop target;
ondrop - fires when the dragged element is dropped on the drop target.
Note: While dragging an element, the ondrag event fires every 350 milliseconds.
The drag-related attributes are part of the event attributes, and can be used on any HTML element.
Note: While dragging an element, the ondrag event fires every 350 milliseconds.
The ondrag attribute is part of the event attributes, and can be used on any HTML element.
script: the script to be run on ondrag.
script: the script to be run on ondragend.
script: the script to be run on ondragenter.
script: the script to be run on ondragleave.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling theevent.preventDefault() method for the ondragover attribute.
script: the script to be run on ondragover.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling theevent.preventDefault() method for the ondragover attribute.
script: the script to be run on ondragstart.
script: the script to be run on ondrop.
Drag the p element back and forth between the two rectangles:
Drag me!
<div>
<p class="spec">Drag the p element back and forth between the two rectangles:</p>
<div class="spec droptarget-1a" ondrop="drop(event)" ondragover="allowDrop(event)">
<p class="spec" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget-1a">Drag me!</p>
</div>
<div style="margin-left:3vw;" class="droptarget-1a" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p class="spec" style="clear:both;" id="demo-1a"></p>
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text-1a", event.target.id);
}
function dragging(event) {
document.getElementById("demo-1a").innerHTML = "The p element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text-1a");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo-1a").innerHTML = "The p element was dropped";
}
</script>
<style>
.droptarget-1a {float: left; width: 10vw; height: 3.5vw; margin: 1.5vw; padding: 1vw; border: 4px solid darkgreen;}
</style>
Drag the p element back and forth between the two rectangles:
Drag me!
<div>
<p class="spec">Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget-2a" ondrop="drop(event)" ondragover="allowDrop(event)">
<p class="spec" ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget-2a">Drag me!</p>
</div>
<div class="droptarget-2a" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p class="spec" style="clear:both;" id="demo-2a"></p>
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text-2a", event.target.id);
document.getElementById("demo-2a").innerHTML = "Started to drag the p element";
}
function dragEnd(event) {
document.getElementById("demo-2a").innerHTML = "Finished dragging the p element.";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text-2a");
event.target.appendChild(document.getElementById(data));
}
</script>
<style>
.droptarget-2a {float: left; width: 10vw; height: 3.5vw; margin: 1.5vw; padding: 1vw; border: 4px solid red;}
</style>
Drag the p element back and forth between the two rectangles:
Drag me!
<div>
<p class="spec">Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget-3a" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"
ondragover="allowDrop(event)">
<p class="spec" ondragstart="dragStart(event)" draggable="true" id="dragtarget-3a">Drag me!</p>
</div>
<div class="droptarget-3a" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<p class="spec" style="clear:both;" id="demo-3a"></p>
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text-3a", event.target.id);
}
function dragEnter(event) {
if ( event.target.className == "droptarget-3a" ) {
event.target.style.border = "3px dotted red";
document.getElementById("demo-3a").innerHTML = "Entered the dropzone";
}
}
function dragLeave(event) {
if ( event.target.className == "droptarget-3a" ) {
event.target.style.border = "";
document.getElementById("demo-3a").innerHTML = "Left the dropzone";
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text-3a");
event.target.appendChild(document.getElementById(data));
}
</script>
<style>
.droptarget-3a {float: left; width: 10vw; height: 3.5vw; margin: 1.5vw; padding: 1vw; border: 4px solid darkgreen;}
</style>
Drag the p element back and forth between the two rectangles:
Drag me!
<div>
<p class="spec">Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget-4a" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"
ondragover="allowDrop(event)">
<p class="spec" ondragstart="dragStart(event)" draggable="true" id="dragtarget-4a">Drag me!</p>
</div>
<div class="droptarget-4a" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<p class="spec" style="clear:both;" id="demo-4a"></p>
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text-4a", event.target.id);
}
function dragEnter(event) {
if ( event.target.className == "droptarget-4a" ) {
event.target.style.border = "3px dotted red";
document.getElementById("demo-4a").innerHTML = "Entered the dropzone";
}
}
function dragLeave(event) {
if ( event.target.className == "droptarget-4a" ) {
event.target.style.border = "";
document.getElementById("demo-4a").innerHTML = "Left the dropzone";
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text-4a");
event.target.appendChild(document.getElementById(data));
}
</script>
<style>
.droptarget-4a { float: left; width: 10vw; height: 3.5vw; margin: 1.5vw; margin-right: 10vw; padding: 1vw; border: 4px solid pink;}
</style>
Drag me into the rectangle!
<div>
<p class="spec" ondragstart="dragStart(event)" draggable="true" id="dragtarget-5a">Drag me into the rectangle!</p>
<div id="droptarget-5a" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p class="spec" style="clear:both;" id="demo-5a"></p>
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text-5a", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
document.getElementById("demo-5a").innerHTML = "The p element is OVER the droptarget.";
event.target.style.border = "4px dotted green";
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text-5a");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo-5a").innerHTML = "The p element was dropped.";
}
</script>
<style>
#droptarget-5a { float: left; width: 15vw; height: 5vw; margin: 1.5vw; margin-right: 10vw; padding: 1vw; border: 4px solid burlywood;}
</style>
Drag the p element back and forth between the two rectangles:
Drag me!
<div>
<p class="spec">Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget-6a" ondrop="drop(event)" ondragover="allowDrop(event)">
<p class="spec" ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget-6a">Drag me!</p>
</div>
<div class="droptarget-6a" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p class="spec" style="clear:both;" id="demo-6a"></p>
</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text-6a", event.target.id);
document.getElementById("demo-6a").innerHTML = "Started to drag the p element";
}
function dragEnd(event) {
document.getElementById("demo-6a").innerHTML = "Finished dragging the p element.";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text-6a");
event.target.appendChild(document.getElementById(data));
}
</script>
<style>
.droptarget-6a {float: left; width: 10vw; height: 3.5vw; margin: 1.5vw; padding: 1vw; border: 4px solid lightgreen;}
</style>
Drag the p element back and forth between the two rectangles:
Drag me!
<div>
<p class="spec">Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget-7a" ondrop="drop(event)" ondragover="allowDrop(event)">
<p class="spec" ondragstart="dragStart(event)" draggable="true" id="dragtarget-7a">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p class="spec" style="clear:both;" id="demo-7a"></p>
</div>
<style>
.droptarget-7a {float: left; width: 10vw; height: 3.5vw; margin: 1.5vw; padding: 1vw; border: 0.4vw solid magenta;}
</style>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text-7a", event.target.id);
document.getElementById("demo-7a").innerHTML = "Started to drag the p element";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text-7a");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo-7a").innerHTML = "The p element was dropped";
}
</script>
The ondurationchange event occurs when the duration data of the specified audio/video is changed. The ondurationchange attribute is part of the event attributes and can be used on the following elements: <audio>, <video>.
<video ondurationchange="script"></video >
example audio:
<video style="margin-left:3vw;" controls ondurationchange="videoChange()">
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function videoChange() {
alert("The video duration has changed");
}
</script>
example video :
<audio id="myAudio" controls ondurationchange="audioChange(this)">
<source style="margin-left:3vw;" src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
function audioChange(x) {
alert("The duration of this audioclip is : " + x.duration + " seconds");
}
</script>