Draggable or Movable div Using Jquery in Asp.Net

01:22:00  , , ,  No comments

Draggable div Using Jquery

Div tag Drag or move One place to another place Using JQuery in Asp.Net.

                                DEMO

                         Download

                     HTML Coding
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Draggable or Movable div Using Jquery in Asp.Net</title>

    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>     
<script  type="text/javascript">
    $(document).ready(function () {
        $("#div1").draggable();
        $("#div2").draggable();
        $("#div3").draggable();
        $("#div4").draggable();
    });
</script>

<style type="text/css">
    .div01
    {      
        color:greenyellow;
        padding: 20px;
         width: 25px;
        height: 25px;      
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
         border: solid 5px #ccc;
    }
     .div02
    {      
        color:lightpink;
        padding: 20px;
        width: 25px;
         height: 25px;         
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
         border: solid 5px #ccc;
    }
      .div03
    {      
        color:maroon;
        padding: 20px;
        width: 25px;
         height: 25px;         
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
         border: solid 5px #ccc;
    }
       .div04
    {      
        color:blueviolet;
        padding: 20px;
        width: 25px;
          height: 25px;            
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
         border: solid 5px #ccc;
    }
</style>   
</head>
<body>
    <div align="center">
<div id="div1"  class="div01">
                    3
</div>
    <div id="div2" class="div02">
2
    </div>
    <div id="div3" class="div03">
4</div>
    <div id="div4" class="div04">
1</div></div>
</body>

</html>


First Add New Webform - Add Required div tag &

JQuery Plugins




Next - Add Css Class to Div Tag




0 comments:

Post a Comment