Saturday, February 23, 2013

jQuery Draggable Div Example in ASP.Net

In previous posts, I explained jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Now , I will show you a simple example of  resizable div using jQuery in ASP.Net.

We can create a resizable div just by simple call the draggable() property of jQuery UI library that would be like as shown below.

<script type="text/javascript">
        $(document).ready(function () {
            $("#demodiv").draggable();
        });
</script>

Here is a simple example of resizable div.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ResizabeDiv._Default" %>

<!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>Draggable Div</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />
    <style type="text/css">
        #demodiv
        {
            height:200px;
            width:200px;
            background-color:Gray;
            border:1px solid black;
        }
        p
        {
            color:White;           
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#demodiv").draggable();
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div id="demodiv">
        <p>
            Drag me</p>
    </div>
    </form>
</body>
</html>

No comments:

Post a Comment

^ Scroll to Top