ARTICLE

JQuery Drag and Drop using Visual Studio 2010

Posted by Sapna in Articles | ASP.NET using VB.NET on February 18, 2011

Tags: JQuery, JQuery Articles, JQuery Drag and Drop, JQuery in Visual Studio, JQuery Tutorials

Learn about JQuery Drag and Drop which is used to convert group of elements into a list that can be sorted by dragging the items.

Tweet
1965
0

Download Files:

JQueryDrag&Drop.zip

Reader Level: Beginner

Drag and Drop usually used to convert group of elements into a list that can be sorted by dragging the items. People generally use drag-and-drop on lists, tables, paragraphs or anything as long as you group the items.

In the following example we'll take a look at how to create drag-and-drop interfaces with jQuery. Use the following Google's CDN, to include jquery library and jquery UI plugin to your page.

<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
...
</head>

Here we add a div to design gallery and then drag it to another div. You need to just call the draggable() method on it. Lets see the complete code.

<html>
<head>
<title>JQuery Drag and Drop</title>
<style>
   #makeMeDraggable { width: 202px;height: 140px;background: red; }
    .style1
    {
      color: #CC0099;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(init);
    function init() {
       $('#makeMeDraggable').draggable();
    }
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"
       style="border-style: ridge; border-color: #CC0099; background-color: #FFE8FF">
     <br /> 
     <span class="style1">
       <strong style="font-family: Verdana; font-size: small; font-weight: bold">
     I am a Div, Drag me!</strong></span></div>
</div>
</body>
</html>

End Result

drag&drop1.gif

Now drag the div with mouse drag into another div and see the output like below.

drag&drop2.gif

If you want highlight the dragged element add a CSS rule for the class ui-draggable-dragging in jquery UI. Let's do some modification so that div will changes from red to green while it's being dragged: