Drag and drop using HTML 5.0


Drag and Drop
Hi

One of the cool feature added in HTML 5.0 i.e drag and drop. Previously we were doing this task by using pure Javascript and Jquery. But we can doing using HTML 5.0 and Javascript in very simple way.

Here just write 3 functions in Javascript i.e
a. allowDrop(ev)
b. drag(ev)
c. drop(ev)

For example if we have to make image as dragable then make there draggable=”True” and ondragstart just call drag function. like this


<img id="img1" src="Water lilies.jpg" draggable="true"
ondragstart="drag(event)" width="336" height="100">


For div where we have to keep this image ondrop just call drop(event) function and on ondragover just call allowDrop function

like this


<div class="DivClass1" ondrop="drop(event)"
        ondragover="allowDrop(event)">Drop Here</div>


The complete HTML code is like this


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Drag and drop</title>
    <style type="text/css">
    .DivClass 
    {
        width:350px;
        height:120px;
        padding:10px;
        border:1px solid #aaaaaa;
     }
     
     .DivClass1 
    {
        width:350px;
        height:120px;
        padding:10px;
        border:5px solid #aaaaaa;
     }
    </style>

    <script type="text/javascript">

        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>
    <form id="form1" runat="server">
   <div class="DivClass" ondrop="drop(event)"
        ondragover="allowDrop(event)">Drop Here </div>
        <br />
        

<div class="DivClass1" ondrop="drop(event)"
        ondragover="allowDrop(event)">Drop Here</div>


<img id="img1" src="Water lilies.jpg" draggable="true"
ondragstart="drag(event)" width="336" height="100">


    </form>
</body>
</html>


Advertisements

How to implement HTML5 validation in registration form ?


HTML5Tag

Hi

Recently i was doing some test with HTML 5 tag. There are some nice cool features have been added. Now no need to write Javascript validation logic or use validation control.

Now we can use inbuilt features of HTML 5 for validation purpose. Here is the complete syntax

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
 <fieldset style="width: 549px">
 <legend><b>Login Detail</b></legend>
  UserName:
<input id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />

Password:
<input id="password" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required>
<p/>
<input type="submit" class="btn" value="Login">
</fieldset>

<br />
<fieldset style="width: 552px">
<legend><b>Registration Detail</b></legend>
 UserName:
<input id="username2" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />

&nbsp;Password:
<input id="password2" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Email:
<input id="email" name="email" type="email" required> <br /> <br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

URL:
<input id="url" name="url" type="url"> <br /> <br />

<p/>
<input type="submit" class="btn" value="Register"> <br /> <br />
</fieldset>
</form>
</body>
</html>

How to use Local Storage and Session Storage Feature of HTML 5.0 ?



Using HTML 5.0, Webpage can store data locally within the user’s browser . Previously I was possible only by using cookie concept but there was storage problem. Many browsers have size limit of 4,096 bytes for a single cookie. But using “local Storage” we store upto 5mb data on browser.

For storing data there are 2 options available
a. Using Local storage : Store data with no expiration date.
b. Using Session Storage : Store data for one session only

Syntax for using Local Storage using Javascript


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LocalStorage.aspx.cs" Inherits="LocalStorage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function SaveData() {
            if (typeof (Storage) !== "undefined") {
                window.localStorage["myKey"] = document.getElementById("txtName").value;
                
                alert("Data has been Save in LocalStorage");
            }
            else {
                alert("Sorry this browser doesnot suppot HTML5");
            }
        }

        function FetchData() {

            document.getElementById("txtOP").value = window.localStorage["myKey"];
          
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtName" runat="server" />
    <br />
    <br />
    <asp:Button ID="btnSubmit" runat="server" OnClientClick="SaveData()" Text="Submit" />

    <br />
    <br />
    <asp:Button ID="btnDisp" runat="server" OnClientClick="FetchData()" Text="Click here to Fetch Data" />
    <br /><br />
    <asp:TextBox ID="txtOP" runat="server" />
    
    </div>
    </form>
</body>
</html>


Note Syntax will same for SessionStorage.

HTML 5 Plugin for VS 2008 and 2010


Hi

It is not mandatory that only VS 2010 Sp1 and above will support HTML 5. Now you can also use in VS 2008 and 2010.

You can download from here HTML 5 Plugin