revision:
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>