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.

img1.jpg

Image 1.

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

img2.jpg

Image 2.

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