Menu ▼



Posted By :
avatarmrkraju
Total Views : 423

Creating draggable div using jquery

This example shows you how to create a draggable div using jquery & jquery ui. You can make the div as draggable by simple applying jquery ui draggable() function in document.ready() event.

Syntax

<script language="javascript">
    $(document).ready(function () {
        $("#divContent").draggable();
    });
</script>

Example

You can drag this div to anywhere on the screen.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style type="text/css">
    .content
    {
        border: solid 2px #ccc;
        padding: 20px;
        width: 200px;
        height: 150px;
        color: #CC3916;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }
</style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script language="javascript">
    $(document).ready(function () {
        $("#divContent").draggable();
    });
</script>
</head>
<body>
<div id="divContent" class="content">
    You can drag this div to anywhere on the screen.
</div>
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com