How to Drag Content using JQuery

This sample demonstrates how to drag content on page using JQuery in web application.

Getting Started

Creating a ASP.NET Application:

• Open Visual Studio 2010.
• Go to File => New => Web Site.
• Select ASP.NET Web Site from the Installed templates
• Enter the Name and choose the location.
• Click OK.

Draggable:

Call .js and .css file inside of page head tag.

<metacharset="utf-8">
        <title>JQuery Drag Drop Sample</title>
        <linkrel="stylesheet"href="theme/jquery.ui.all.css">
        <scriptsrc="jquery-1.4.4.js"></script>
        <scriptsrc="ui/jquery.ui.core.js"></script>
        <scriptsrc="ui/jquery.ui.widget.js"></script>
        <scriptsrc="ui/jquery.ui.mouse.js"></script>
        <scriptsrc="ui/jquery.ui.draggable.js"></script>
<scriptsrc="ui/jquery.ui.droppable.js"></script>

<style>
        #draggable { width: 150px; height: 150px; padding: 0.5em; }
        .style1
        {
width: 135px;
height: 70px;
        }
        </style>
        <script>
            $(function () {
                $("#draggable").draggable();
            });        </script>
Now run the application to see the result.



Image 1.

You can drag this div anywhere on page just keep pressing mouse left button and move it like image 2.


Image 2.

We are done here, if questions or comments drop me comment in comments section.