Post
Ask Question

Drag and Drop Title in HTML 5

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.
  • Open start->Notepad.
  • The name of the editor is "drag".
notepad.gif
 
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "drop".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Drag.aspx".
new application.gif
 
openapplication.gif 
 
Step 4 : Add a HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Drop.html".
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. }  
  13.    
  14. .draggedUser   
  15. {  
  16.   zoom: 2;  
  17.   opacity: .3;  
  18.   moz-opacity: .4;  
  19.   filter: alpha(opacity=30)  
  20. }  
  21.    
  22. #unassignedUsers:hover  
  23. {  
  24.    ackground-color:Blue;      
  25. }  
  26.    
  27. #restrictedUsers:hover   
  28. {  
  29.   background-color:Fuchsia;  
  30. }  
  31.    
  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 


Similar Articles