Drag and Drop Concept using Jquery | 2my4edge

23 October 2013

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.
drag-drop concept using jquery

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>
the widget div are draggable, that is what we are mentioned in the above script. i hope this will helpful to every one.

RELATED POSTS :


Rotate image on hover using CSS3

Most popular posts in 2my4edge

Change text & background color while selecting text using CSS3

Marquee style in different manner with PHP and MySql

My Demos page design details with all my tutorials

Image Zoommer like E-commerce site using multizoom.js

Facebook style Scroll bar using Jquery

Change background image while page refresh using Javascript

Better and Flexible Tooltip using LiteTooltip.js

Resize the font using Query

Image gallery with lightbox effect using Jquery

No comments:

Post a Comment

^