Lesson 25: Drag and Drop

This lesson will give you an introduction to drag and drop.

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 event ondragstart and the script includes function drag(ev).
  • Where you can drop the object: event.preventDefault() on the event ondragover.
  • What happens when you drop the object: function drop(ev) on the event ondrop.

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.

Before you leave us though, read the next lesson to get some tips and best practices.
Related topics in the RepliesViews
No related topics yet

+ Post a new topic

<< Lesson 24: Web Storage

Lesson 26: Final tips >>