Drag and Drop Concept using Jquery

Drag and Drop concept using Jquery plugin, here i'm going to show you, how to make drag and drop concept using Jquery, This drag and Drop method is mostly used for designing purpose. here i just used a simple drag and drag concept for designing purpose, i'll show you more thing later about this drag and drop method, let me explain the details about this concept.

DOWNLOAD LIVE DEMO

SCRIPTS

The below highlighted scripts are important scripts, those scripts are must need to run the function.

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#draggable").sortable({
connectWith: ".widget",
items: ".widget",
opacity: 0.5,
coneHelperSize: true,
forcePlaceholderSize: true,
tolerance: "pointer"
});
</script>

I hope you may know about Jquery ui min files. i'll tell about that later.

CODE

we have to mention the id in the div as we given in the script.

<div id="draggable">
 <div class="col">
    <div class="widget pink">
        <div class="widget-title">
            <h4>Resize the font using</h4>
        </div>
        <div>Resize the font size using Jquery, 
        zoom in and zoom out the font size </div>
    </div>
    
    <div class="widget red">
        <div class="widget-title">
            <h4> Image slider using Jquery</h4>
        </div>
        <div>Image slider with multiple random animation
        effects using Jquery, it may usefull to header of 
        all webpage </div>
    </div>
    
    <div class="widget green">
        <div class="widget-title">
            <h4> Get support with foreign language</h4>
        </div>
    <div>Get support with foreign and regional language
    in php and mysql, while insert and view database data,
    that may not support foreign and regional language</div>
    </div>
 </div>
</div>