This is one of the emerging HTML5 tools that promises to make websites more interactive without relying on additional technologies such as Flash. In this tutorial we will create a simple page with images the user can drag and drop into designated areas.
Create an HTML5 Web Page
Add Drag Targets to the Page
Your page will contain elements that can be dragged and elements in which the dragged items can be dropped. Start with the areas your user will be able to drop draggable elements into, adding the following in your page body section:[crayon-54cbb81e7f175537912433/]
Add Draggable Elements to the Page
Let’s use a couple of image elements to drag within the page. Use the following markup for each one, altering the image source attributes for your own images:[crayon-54cbb81e7f18d396119333/]
Alter the image elements to suit the name, location and dimensions of your own image files as well as your chosen IDs.
Style the Elements
Add the following declarations to the style section in your page head:[crayon-54cbb81e7f1b6409579949/]
These declarations apply to all elements whose ID attributes begin with “place” as our holder elements do. The shorthand notation uses a wildcard to specify this, rather than having to specify every ID attribute for the elements that your items can be dropped within. Alter the dimensions to suit your images and the styling for backgrounds or borders in any way you like. To make the demonstration clearer, you can add the following HTML at the bottom of the page:[crayon-54cbb81e7f1ca895833893/]
Style the new elements by adding the following to your CSS code, so that you can see at a glance which element you are dragging and dropping into:[crayon-54cbb81e7f1dd182477374/]
Add the following function inside the script section in your page head:[crayon-54cbb81e7f1ef669281316/]
If you look at your image elements you will see that this is the function specified within the “ondragstart” event attribute. The content of the function specifies the image element, letting the browser know that is what to drag. The function receives an event variable providing access to data about the element being dragged.
Add the following function after your dragging function:[crayon-54cbb81e7f202071229698/]
This code first gets a reference to the dragged element, then adds it to the element it is being dropped in. Again, the code tells the browser not to implement the default behavior so that the image can be dropped successfully. This function also receives the event data indicating information about the dragged element and the element being dropped over.
Open your page in the browser and test it by clicking and dragging the images. Notice that if you drag the images over a page area that you have not explicitly instructed the browser to allow dropping in, they snap back to their original position. As long as you drop over a designated element, your images can be moved around. Notice also that if you drop one image on top of another, the next time you drag one, they both drag.
HTML5 functions bring a greatly enhanced level of interactivity to Web development. The future looks pretty exciting, but for the moment remember to take care of users with browsers that do not support these emerging techniques.