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 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 a HTML editor such as Notepad.

  • Open start->Notepad.
  • The name of editor is "drag".

notepad.gif

Step 2 :
Create a Folder on a desktop.

  • Right-click on desktop->new->Folder.
  • Name of 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 a color of frame after dropping the title on a frame.

Code

<script type="text/javascript" src="T1.js"></script>
<
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

table.userTable td a
{

   display:inline;

   width: 20em;

   height: 2.4em;

   border: solid 1px #999999;

   text-decoration:none;

   text-align: center;

   margin-bottom: .5em;

   background-color:transparent;

   cursor:default;

   }
.draggedUser
 {

  zoom: 2;

  opacity: .3;

  moz-opacity: .4;

  filter: alpha(opacity=30)

    }
#unassignedUsers:hover
  {

   ackground-color:Blue;    

     }
#restrictedUsers:hover
{

  background-color:Fuchsia;

     }
#powerUsers:hover
  {

  background-color:Green;

      }

Step 7 : In this step we define a table body container.

Code
 
<tbody>
    <tr>
    <td id="unassignedUsers" class="userList">
    <a href="#" draggable="true">Csharpcorner</a>
    <a href="#" draggable="true">Mindcracker</a> 
    <a href="#" draggable="true">mcn professionals</a>
    <a href="#" draggable="true">mcn solutions</a>
    </td>
    <td id="restrictedUsers" class="userList">
    </td>
    <td id="powerUsers" class="userList">
    </td>
    </tr>
</
tbody
>

body.gif

Step 8 :
  Set a message that shows completion of dragging a title from one table to another table.

Code

<tfoot>
 <td id="unassignedUsersHelp">Drag and drop example</td>
 <td id="restrictedUsersHelp">Drag and drop example</td>
 <td id="powerUsersHelp" >Drag and drop example</td>
</
tfoot
>

Step 9 : The complete drag and drop application code is given below.

Code

<html>
 <head>
 <title>Drag and Drop </title>
 <link href="style.css" rel="stylesheet" type=
 "text/css">
 <script type="text/javascript" src="T1.js"></script>
 <script type="text/javascript" src="T2.js"></script
>
 
</head>
 <body bgcolor="#ff99cc">
 <form>
 <fieldset>
 <legend>Tom application</legend>
 <table class="userTable">
 <thead>
 <tr>
 <th bgcolor="Red">Company</th>
 <th>Developer</th>
 <th>Trainee</th>
 </tr>
 </thead>
 <
tbody>
    <tr>
    <td id="unassignedUsers" class="userList">
    <a href="#" draggable="true">Csharpcorner</a>
    <a href="#" draggable="true">Mindcracker</a> 
    <a href="#" draggable="true">mcn professionals</a>
    <a href="#" draggable="true">mcn solutions</a>
    </td>
    <td id="restrictedUsers" class="userList">
    </td>
    <td id="powerUsers" class="userList">
    </td>
    </tr>
 </
tbody
>
 
<tfoot>
 <td id="unassignedUsersHelp">Drag and drop example</td>
 <td id="restrictedUsersHelp">Drag and drop example</td>
 <td id="powerUsersHelp" >Drag and drop example</td>
 </
tfoot
>
 </table>
 </fieldset>
 </form>
 </body
>
</html>

Step 10 : Press Ctrl + F5 to run the application in the browser.

Output 

 rama.gif

 rama1.gif

 rama2.gif

 rama3.gif

Resources

Here is some useful resources 

Up Next
    Ebook Download
    View all
    Learn
    View all