JQuery Drag and Drop using Visual Studio 2010 in VB.NET

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.
  • 2699
Download Files:
 
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 />
&nbsp;
     <
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

ar 1.gif

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

ar 2.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:

<style>
 
#makeMeDraggable { width: 300px; height: 300px; background: red; }
 
#makeMeDraggable.ui-draggable-dragging { background: green; }
</style>

Enjoy the JQuery Coding...

 

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.