Introduction

This is a simple application for beginners that shows how to drag and drop a title onto canvas using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop a drag and drop a title onto a canvas application. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of a HTML 5 that is used to show the image and text in a HTML 5 application. I hope this article helps to drag and drop titles onto canvas using HTML 5 and CSS tools.
Step 1: First Open an HTML editor such as Notepad.
notepad.gif
Step 2: Create a Folder on a desktop.
folder.gif
Step 3: Open Visual Studio.
new application.gif
openapplication.gif
Step 4 : Add a HTML file to your web application.
html.gif
Step 5 : Add a js file to the application. The T1.js file provides the functionality of dragging a title from one frame and dropping to another frame and the T2.js file is used to change the color of the frame after dropping the title on a frame.
Code
  1. <script type="text/javascript" src="T1.js"></script>
  2. <script type="text/javascript" src="T2.js"></script>
Step 6 : Now in this step we add a css file that sets all properties of a table. Through css we set color, size and font properties of the table.
Code
  1. table.userTable td a
  2. {
  3. display:inline;
  4. width: 20em;
  5. height: 2.4em;
  6. border: solid 1px #999999;
  7. text-decoration:none;
  8. text-align: center;
  9. margin-bottom: .5em;
  10. background-color:transparent;
  11. cursor:default;
  12. }
  14. .draggedUser
  15. {
  16. zoom: 2;
  17. opacity: .3;
  18. moz-opacity: .4;
  19. filter: alpha(opacity=30)
  20. }
  22. #unassignedUsers:hover
  23. {
  24. ackground-color:Blue;
  25. }
  27. #restrictedUsers:hover
  28. {
  29. background-color:Fuchsia;
  30. }
  32. #powerUsers:hover
  33. {
  34. background-color:Green;
  35. }
Step 7: In this step we define a table body container.
Code
  1. <tbody>
  2. <tr>
  3. <td id="unassignedUsers" class="userList">
  4. <a href="#" draggable="true">Csharpcorner</a>
  5. <a href="#" draggable="true">Mindcracker</a>
  6. <a href="#" draggable="true">mcn professionals</a>
  7. <a href="#" draggable="true">mcn solutions</a>
  8. </td>
  9. <td id="restrictedUsers" class="userList">
  10. </td>
  11. <td id="powerUsers" class="userList">
  12. </td>
  13. </tr>
  14. </tbody>
body.gif
body.gif
Step 8: Set a message that shows completion of dragging a title from one table to another table.
Code
  1. <tfoot>
  2. <td id="unassignedUsersHelp">Drag and drop example</td>
  3. <td id="restrictedUsersHelp">Drag and drop example</td>
  4. <td id="powerUsersHelp" >Drag and drop example</td>
  5. </tfoot>
Step 9: The complete drag and drop application code is given below.
Code
  1. <html>
  2. <head>
  3. <title>Drag and Drop </title>
  4. <link href="style.css" rel="stylesheet" type="text/css">
  5. <script type="text/javascript" src="T1.js"></script>
  6. <script type="text/javascript" src="T2.js"></script>
  7. </head>
  8. <body bgcolor="#ff99cc">
  9. <form>
  10. <fieldset>
  11. <legend>Tom application</legend>
  12. <table class="userTable">
  13. <thead>
  14. <tr>
  15. <th bgcolor="Red">Company</th>
  16. <th>Developer</th>
  17. <th>Trainee</th>
  18. </tr>
  19. </thead>
  20. <tbody>
  21. <tr>
  22. <td id="unassignedUsers" class="userList">
  23. <a href="#" draggable="true">Csharpcorner</a>
  24. <a href="#" draggable="true">Mindcracker</a>
  25. <a href="#" draggable="true">mcn professionals</a>
  26. <a href="#" draggable="true">mcn solutions</a>
  27. </td>
  28. <td id="restrictedUsers" class="userList">
  29. </td>
  30. <td id="powerUsers" class="userList">
  31. </td>
  32. </tr>
  33. </tbody>
  34. <tfoot>
  35. <td id="unassignedUsersHelp">Drag and drop example</td>
  36. <td id="restrictedUsersHelp">Drag and drop example</td>
  37. <td id="powerUsersHelp" >Drag and drop example</td>
  38. </tfoot>
  39. </table>
  40. </fieldset>
  41. </form>
  42. </body>
  43. </html>
Step 10 : Press Ctrl + F5 to run the application in the browser.
Output
rama.gif
rama1.gif
rama2.gif
rama3.gif
Resources
Here are some useful resources