Home
Drag And Drop With Data Basics
Copy this lot into your HTML Editor and play
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
<style>
div{
background-color:grey;
padding:10px;
margin:20px;
}
</style>
<script>
function drag(myitem) {
sessionStorage.setItem('MyItem', myitem)
}
function drop(myitem) {
x = document.getElementById('ShowDiv')
x.innerText = 'From - ' + sessionStorage.getItem('MyItem') + " - To - " + myitem
}
function allowdrop() {
event.preventDefault()
}
</script>
</head>
<body>
<div
draggable="true"
ondragstart="drag('aaa')"
>
This is Dragable aaa
</div>
<div
draggable="true"
ondragstart="drag('ccc')"
>
This is Dragable ccc
</div>
<br />
<div id="ShowDiv"></div>
<br />
<div
ondragover="allowdrop()"
ondrop="drop('bbb')"
>
This is Dropable bbb
</div>
<div
ondragover="allowdrop()"
ondrop="drop('ddd')"
>
This is Dropable ddd
</div>
</body>
</html>
Simple explanation...
draggable="true"
Tells the browser this item can be dragged. Some things can be (images, buttons, divs) and some things cant be (span if I recall, do your research if you can't drag something)
ondragstart="drag('aaa')"
What JavaScript function to run when the drag of this particular item (in this case the div) is starts to be dragged. So "when the drag is started run the function drag passing the value of aaa"
function drag(myitem) {
sessionStorage.setItem('MyItem', myitem)
}
The drag function and the variable that has been passed. So the drag starts and when it does this code is run. We were passed the value aaa and we store this value into a small bit of memory space called sessionStorage. Our bit of sessionStorage we have called MyItem. Now the characters aaa are stored in MyItem
ondragover="allowdrop()"
In the divs we want to drop into we have ondragover. It seems a bit pointless this but essentially we are telling the browser this div CAN be dragged over and what to do when something is dragged over it.
function allowdrop() {
event.preventDefault()
}
So what does this function do? allowdrop is called when the dragged item is dragged over the div where we can drop things. event.preventDefault() seems to me to say "don't poop your pants browser, don't panic, don't do anything OK"
ondrop="drop('ddd')"
In the droppable div this code is run when you drop the div you've dragged over. In this instance we are also passing the variable ddd.
function drop(myitem) {
x = document.getElementById('ShowDiv')
x.innerText = 'From - ' + sessionStorage.getItem('MyItem') + " - To - " + myitem
}
This code is run when the drop is made. First we set x to be ShowDiv so we can write our results. The we set x's innertext so we can see the results. Now, remember we stored the characters aaa in MyItem earlier? we get those characters back with sessionStorage.getitem and add in the ddd we passed as a variable, add them all together so we can see what we did.
Reader's Comments
Name
Comment
Add a RELEVANT link (not required)
Upload an image (not required)
Uploading...
Home