Drag and drop
You can let readers drag and drop objects on your web page from one spot to another. Maybe they are taking a test or quiz (match objects to definitions, for example) or maybe it's a new way of dropping products into an online shopping cart. The one we'll build in this tutorial is just for fun though.
You need code that sets three things:
- What you can drag: the image has
draggable="true"on the eventondragstartand the script includesfunction drag(ev). - Where you can drop the object:
event.preventDefault()on the eventondragover. - What happens when you drop the object:
function drop(ev)on the eventondrop.
Try it yourself by setting
draggable="true" on any element in your page (like an image or paragraph) and then try dragging it around. Just setting draggable lets you drag, but you can't drop it anywhere.
Here's the full code for it:
Drag and drop
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<img id="img1" src="puzzle1.png" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="img2" src="puzzle2.png" draggable="true"
ondragstart="drag(event)">
</body>
Try the full code by copying/pasting and then changing the src attribute value to point to a graphic you have.
Let's walk through what is going on here. In the first part of the script, we have the code that allows us to drop the object. We have to override the default behaviour, which is to NOT let objects be dropped anywhere.
Allowing an element to be dropped
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
Next, we have the drag portion of the script which sets the type of information that is being dragged.
Drag
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
Next, we have the drop portion of the code, which sets the place where you can drop the object.
Drop
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
Next, we have our HTML code that specifies which object is draggable and invokes the JavaScript using the
ondrop and ondragover events on the place to drop it and the ondragstart event on the object to drag.
<body>
<img id="img1" src="puzzle1.png" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="img2" src="puzzle2.png" draggable="true"
ondragstart="drag(event)">
</body>
Try it out with your own graphic!
If you've made it this far (and I know you have!), you are officially no longer new at HTML5! You have used advanced code to add some pretty awesome features to your web pages. You are now ready to build some pretty great pages and to learn more about CSS and Javascript.
0 comments:
Post a Comment